ElementUI的table组件实现多级树形结构的双向全选、半选和取消功能

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :default-expand-all="false"
    :expand-row-keys="expandRowKeys"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    @expand-change="handleExpandChange"
  >
    <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
    <!-- 其他列定义 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [], // 树形结构的数据
      expandRowKeys: [] // 当前展开的节点
    };
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        this.expandRowKeys.push(row.id);
      } else {
        this.expandRowKeys = this.expandRowKeys.filter(key => key !== row.id);
      }
    },
    // 全选、半选、取消方法
    handleSelectAll(isAll) {
      if (isAll) {
        this.expandRowKeys = this.tableData.map(item => item.id);
      } else {
        this.expandRowKeys = [];
      }
    }
  }
};
</script>

这个代码实例展示了如何使用ElementUI的Table组件实现多级树形结构的全选、半选和取消选择功能。通过监听expand-change事件，我们可以动态更新expandRowKeys数组，从而控制哪些节点是展开的。同时，提供了handleSelectAll方法来处理全选操作，更新expandRowKeys来反映出所有节点的状态。