selectable elementui

实现 Selectable 功能的 Element UI 组件

Element UI 提供多种支持选择功能的组件，以下为常见场景的实现方法：

表格多选

使用 el-table 结合 selection 列类型可实现多选功能：

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

<script>
export default {
  methods: {
    handleSelectionChange(val) {
      this.selectedItems = val
    }
  }
}
</script>

下拉选择器

el-select 支持单选/多选模式：

<!-- 单选 -->
<el-select v-model="selectedValue" placeholder="请选择">
  <el-option
    v-for="item in options"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

<!-- 多选 -->
<el-select
  v-model="selectedValues"
  multiple
  collapse-tags
  placeholder="请选择">
  <!-- 选项同上 -->
</el-select>

复选框组

el-checkbox-group 实现多选项集合：

<el-checkbox-group v-model="checkedItems">
  <el-checkbox v-for="item in items" :label="item" :key="item">{{item}}</el-checkbox>
</el-checkbox-group>

树形选择

el-tree 通过配置 show-checkbox 实现多选：

<el-tree
  :data="treeData"
  show-checkbox
  node-key="id"
  @check-change="handleCheckChange">
</el-tree>

关键配置参数

• type="selection"：表格多选列类型
• multiple：下拉框多选模式
• collapse-tags：多选时合并显示标签
• show-checkbox：树形控件显示复选框
• check-strictly：树形控件父子节点关联选择

事件处理

• @selection-change：表格选择变化事件
• @check-change：树节点选择状态变化事件
• @change：下拉选择器值变化事件

以上组件均支持通过 v-model 进行数据双向绑定，选择结果会自动同步至绑定变量。