elementui selectable

ElementUI Selectable 功能实现

ElementUI 的 selectable 属性通常用于控制某些组件（如表格或树形控件）中的行或节点是否可以被选中。以下是几种常见场景的实现方法。

表格行可选配置

在 ElementUI 表格中，通过 row-key 和 selection-change 事件实现行的可选功能。selectable 可以通过函数控制某一行是否可被选中。

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange"
  row-key="id">
  <el-table-column
    type="selection"
    :selectable="checkSelectable"
    width="55">
  </el-table-column>
  <!-- 其他列 -->
</el-table>

methods: {
  checkSelectable(row, index) {
    // 只有 id 不为 1 的行可选
    return row.id !== 1;
  },
  handleSelectionChange(val) {
    this.selectedRows = val;
  }
}

树形控件节点可选

在 el-tree 中，通过 show-checkbox 和 check-strictly 属性控制节点的可选性。selectable 可以通过 disabled 属性实现。

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  :props="defaultProps"
  :default-checked-keys="checkedKeys"
  @check="handleCheck">
</el-tree>

data() {
  return {
    treeData: [
      {
        id: 1,
        label: '一级节点',
        children: [
          { id: 2, label: '二级节点', disabled: true } // 禁用该节点
        ]
      }
    ],
    defaultProps: {
      children: 'children',
      label: 'label',
      disabled: 'disabled' // 通过 disabled 字段控制是否可选
    }
  };
}

下拉选择框禁用选项

在 el-select 中，通过 disabled 属性控制某些选项是否可选。

<el-select v-model="selectedValue" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value"
    :disabled="item.disabled"> <!-- 禁用特定选项 -->
  </el-option>
</el-select>

data() {
  return {
    selectedValue: '',
    options: [
      { value: '1', label: '选项1' },
      { value: '2', label: '选项2', disabled: true } // 该选项不可选
    ]
  };
}

自定义选择逻辑

通过事件和方法动态控制选择行为，例如在表格中根据条件禁止选中某些行。

methods: {
  handleSelectionChange(selection) {
    // 过滤掉不符合条件的行
    this.selectedRows = selection.filter(row => row.status === 'active');
  }
}

以上方法覆盖了 ElementUI 中常见的 selectable 功能实现场景，可以根据具体需求选择适合的方式。