el-table el-column selection disable

要禁用 Element UI 中的表格（el-table）中的某个列（el-column）的选择功能，可以在该列的配置中添加一个 `type` 属性，并将其设置为 `"selection-disabled"` 。示例如下：

<el-table :data="tableData">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
  <el-table-column prop="age" label="Age"></el-table-column>
  <el-table-column type="selection-disabled" label="Disable Selection"></el-table-column>
</el-table>

在上面的示例中，第三个列被设置为 `type="selection-disabled"` ，这样就禁用了该列的选择功能。

相关问题

el-table el-column selection 设置禁用无效

如果在 ElementUI 的 el-table 中设置了 `disable` 属性，但是 el-column 的选择功能仍然可用，可能是由于 `disable` 属性只是禁用了 el-table 的选择功能，而 el-column 是作为 el-table 的子组件，不受 el-table 的 `disable` 属性控制。

如果要禁用 el-column 的选择功能，可以通过修改 el-column 的 `selectable` 属性来实现。具体代码如下：

<template>
  <el-table
    :data="tableData"
    :selectable="!disabled"
    @selection-change="handleSelectionChange"
    :row-key="row => row.id">
    <el-table-column
      type="selection"
      :selectable="selectable"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 25 },
      ],
      disabled: true,
      selectable: false,
    };
  },
  methods: {
    handleSelectionChange(selection) {
      console.log(selection);
    },
  },
};
</script>

在上面的代码中，我们通过 `selectable` 属性来控制 el-column 的选择功能是否可用。如果 `selectable` 的值为 `false`，则 el-column 的选择功能将被禁用。在 `el-table` 中，我们可以通过 `selectable` 属性来控制 el-table 的选择功能是否可用。如果 `selectable` 的值为 `false`，则 el-table 的选择功能将被禁用。

同时，我们也可以通过 `disabled` 属性来控制整个 el-table 的选择功能是否可用。如果 `disabled` 的值为 `true`，则整个 el-table 的选择功能将被禁用。

vue treeselect 包在el-table-column导致isDisabled失效的问题怎么解决

在Vue中，当你尝试在一个`el-table-column`组件中使用`vue-treeselect`库，并遇到了`isDisabled`属性失效的问题，这通常是因为`el-tree-select`组件没有正确地响应其父组件的`disabled`状态。为了解决这个问题，你可以按照以下步骤操作：

1. **确保props传递**：
确保你在`el-table-column`中通过`prop`将`disabled`的状态传给`vue-treeselect`组件。例如：

   <el-table-column prop="property" label="选择">
     <template slot-scope="scope">
       <vue-treeselect :options="options" v-bind:disabled="scope.row.disabled"></vue-treeselect>
     </template>
   </el-table-column>

2. **双向数据绑定**：
如果你想实时更新`isDisabled`，可以使用`v-model`绑定状态到数据上，并监听数据的变化：

   data() {
     return {
       disabledValue: false // 或者根据实际需求初始化
     }
   },
   computed: {
     isDisabled() {
       return this.disabledValue;
     }
   },
   methods: {
     toggleDisable() {
       this.disabledValue = !this.disabledValue; // 当需要改变disable状态时调用这个方法
     }
   }

3. **事件触发**：
如果你需要在其他地方控制`isDisabled`，可以在`table-column`的父组件中处理事件，然后传递给子组件。比如：

   <parent-component @toggle-disable="toggleDisableForTableColumn"></parent-component>
   
   methods: {
     toggleDisableForTableColumn(disabled) {
       this.$nextTick(() => {
         this.$refs.myTableColumnInstance.isDisabled = disabled;
       });
     }
   }

4. **检查是否渲染成功**：
确保`vue-treeselect`组件已经正确渲染并且你能在`this.$refs`中找到它。

如果你依然遇到问题，可能是`vue-treeselect`内部处理`disabled`属性的方式与`element-ui`的`el-tree-select`有所不同，可能需要查看库的文档或者查阅源码查找是否有特殊处理。如果问题仍未解决，请提供更多的代码片段以便于定位。