elementui selectable

ElementUI Selectable 功能

ElementUI 的 selectable 属性通常用于控制某些组件（如 el-tree 或 el-table）中的节点是否可被选中。以下是几种常见的使用场景和配置方式。

el-tree 中的 selectable

在 el-tree 中，selectable 可以通过 node 属性或 props 配置来控制节点是否可选。

<el-tree
  :data="treeData"
  :props="defaultProps"
  show-checkbox
  node-key="id"
  :default-expand-all="true"
>
</el-tree>

相关配置：

• show-checkbox：启用复选框模式。
• node-key：指定节点唯一标识字段（如 id）。
• props：定义树节点的数据映射，如 label 和 children。

动态控制可选性：
通过 :render-content 或 :props 的 disabled 属性，可以动态控制某些节点是否可选。

defaultProps: {
  children: 'children',
  label: 'label',
  disabled: (data, node) => {
    return data.isDisabled; // 根据数据动态禁用
  }
}

el-table 中的 selectable

在 el-table 中，selectable 用于控制行的可选状态，通常结合 el-table-column type="selection" 使用。

<el-table
  :data="tableData"
  @selection-change="handleSelectionChange"
>
  <el-table-column type="selection" :selectable="checkSelectable"></el-table-column>
  <el-table-column prop="name" label="Name"></el-table-column>
</el-table>

selectable 方法：

methods: {
  checkSelectable(row, index) {
    return row.status !== 'disabled'; // 仅允许非禁用行被选中
  }
}

关键点：

• type="selection"：启用行选择功能。
• @selection-change：监听选中行变化。
• :selectable：自定义行是否可选。

注意事项

1. el-tree 默认行为

   • 如果未配置 selectable 或 disabled，所有节点默认可选。
   • 通过 node.disabled 可以动态禁用节点。

2. el-table 选择逻辑

   • selectable 返回 false 时，行不可选且复选框禁用。
   • 已选中的行在 selectable 变为 false 后仍会保留在 selection 中，需手动处理。

3. 多选与单选

   • el-table 默认支持多选，如需单选，可结合 @select 事件手动清空其他选项。

handleSelect(selection, row) {
  this.$refs.table.clearSelection();
  this.$refs.table.toggleRowSelection(row);
}

通过合理配置 selectable，可以灵活控制 ElementUI 组件的可选行为，适应不同业务需求。