element-plus树形表格多选

Element Plus的Tree Table组件是一个功能强大的工具，用于展示层次结构的数据，并支持多选功能。在Element Plus中，你可以使用`el-tree`组件来实现树形表格，其中包含选项卡式或多列的多选模式。以下是基本步骤：

1. **引入组件**：首先，在你的Vue项目中引入`ElementPlus`的Tree Table组件，通常通过`import { ElTree } from 'element-plus'`。

2. **配置数据**：定义一个树形数据结构，每个节点可能包含`label`（标签）、`children`（子节点数组）和一个布尔属性`checkable`（可选，表示是否可以被选择）。

3. **设置选中状态**：在节点对象上添加`selected`属性来控制当前节点是否被选中。你可以在`<el-tree>`组件的`props`中设置默认的选中状态或提供一个方法来处理选中/取消选中事件。

4. **多选功能**：在`<el-tree>`组件中启用多选，通常通过设置`default-checked-keys`属性来初始化选中的节点，或者使用`@selection-change`事件监听用户的选择变化。

<template>
  <el-tree
    :data="treeData"
    :props="treeProps"
    :default-checked-keys="selectedKeys"
    @selection-change="handleSelectionChange"
    :check-strictly="true" <!-- 如果不需要递归选择，可以关闭 -->
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: ...,
      selectedKeys: [], // 初始化的选中节点ID数组
      treeProps: {
        children: 'children',
        label: 'name', // 树形节点的显示文本
        disabled: 'disabled', // 如果有的节点不可选择
      },
    };
  },
  methods: {
    handleSelectionChange(newKeys) {
      this.selectedKeys = newKeys;
      // 这里可以对新选中的节点做进一步操作
    },
  },
};
</script>