vue3el-tree树形二级可选择多选框反填

Vue3中的`Element Tree (el-tree)`是一个基于Element UI的组件，用于展示层级结构的数据，支持多选功能。当涉及到二级可选择或多选框反填（即从用户的选择反向填充数据结构），你可以这样做：

1. 安装并引入组件：首先，在你的Vue项目中安装`element-ui`和`vue-element-tree`库。

npm install element-ui vue-element-tree

然后，在`main.js`或其他引用依赖的地方导入组件：

import { ElTree } from 'element-ui/packages/tree';
// 或者
import ElTree from 'vue-element-tree/dist/index.js';

2. 使用ElTree组件：在模板部分，创建一个ElTree组件，并设置必要的属性如`data`, `props`等。对于多选功能，可以设置`check-strictly`属性为`false`，允许随意切换节点的选中状态。

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    ref="treeRef"
    :props="{ children: 'children', label: 'name' }"
    check-strictly="false" <!-- 允许非严格多选 -->
    @node-click="handleNodeClick"
    @check-change="handleCheckChange"
  ></el-tree>
</template>

3. 处理节点点击和状态变化：在`methods`中定义两个处理函数，`handleNodeClick`用于处理节点点击事件，更新节点状态；`handleCheckChange`则用于监听节点选中状态的变化，将选定的节点ID存储到数组或其他合适的数据结构中。

export default {
  data() {
    return {
      treeData: [], // 根据实际数据填充
      selectedIds: [] // 存储被选中的节点ID
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.indeterminate || node.checked) {
        this.$refs.treeRef.setCheckedKeys([node.id], true);
      }
    },
    handleCheckChange(data) {
      this.selectedIds = data.filter(item => item.checked);
    }
  }
}

4. 反填数据：当你需要根据用户的选择反填数据，可以根据`selectedIds`数组访问原始数据，构建新的数据结构。

updateDataStructure() {
  const selectedNodes = this.treeData.filter(node => this.selectedIds.includes(node.id));
  // 根据需求调整这里，可能是合并、移除等操作
  // 更新this.treeData 或者其他变量
}