使用Element UI的el-tree组件实现自定义复选框反选功能

Element UI的el-tree组件提供了强大的树形结构展示功能，包括复选框选择。要实现自定义的反选功能，可以通过以下几种方式：

方法一：使用setCheckedKeys方法

<template>
  <div>
    <el-tree
      ref="tree"
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
    ></el-tree>
    <el-button @click="reverseSelection">反选</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [/* 你的树形数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    reverseSelection() {
      const tree = this.$refs.tree;
      // 获取所有节点
      const allNodes = tree.getNode('').childNodes;
      const allKeys = this.getAllKeys(allNodes);

      // 获取当前选中的keys
      const checkedKeys = tree.getCheckedKeys();

      // 计算反选后的keys
      const reversedKeys = allKeys.filter(key => !checkedKeys.includes(key));

      // 设置新的选中状态
      tree.setCheckedKeys(reversedKeys);
    },
    getAllKeys(nodes) {
      let keys = [];
      nodes.forEach(node => {
        keys.push(node.key);
        if (node.childNodes && node.childNodes.length > 0) {
          keys = keys.concat(this.getAllKeys(node.childNodes));
        }
      });
      return keys;
    }
  }
}
</script>

方法二：使用递归遍历节点

methods: {
  reverseSelection() {
    const tree = this.$refs.tree;
    const rootNode = tree.getNode(''); // 获取根节点

    // 递归遍历所有节点
    this.traverseNodes(rootNode.childNodes, (node) => {
      tree.setChecked(node.key, !tree.getChecked(node.key));
    });
  },
  traverseNodes(nodes, callback) {
    nodes.forEach(node => {
      callback(node);
      if (node.childNodes && node.childNodes.length > 0) {
        this.traverseNodes(node.childNodes, callback);
      }
    });
  }
}

方法三：结合checked和indeterminate状态

如果需要更精细的控制（包括半选状态）：

methods: {
  reverseSelection() {
    const tree = this.$refs.tree;
    const rootNode = tree.getNode('');

    this.traverseNodes(rootNode.childNodes, (node) => {
      const isChecked = tree.getChecked(node.key);
      const isIndeterminate = tree.getIndeterminate(node.key);

      if (isIndeterminate) {
        // 如果节点是半选状态，可以自定义处理逻辑
        tree.setChecked(node.key, true);
      } else {
        tree.setChecked(node.key, !isChecked);
      }
    });
  }
}

注意事项

1. 性能考虑：对于大型树结构，反选操作可能会影响性能，可以考虑添加加载状态或分步处理。

2. 节点key：确保每个节点都有唯一的node-key属性值。

3. 默认展开：如果需要默认展开某些节点，可以使用default-expanded-keys属性。

4. 懒加载：如果树使用了懒加载，反选时可能需要额外处理未加载的节点。

5. 事件监听：可以监听check-change事件来响应选择状态的变化。

以上方法可以根据你的具体需求进行调整，实现灵活的反选功能。