el-tree实现一键全选、反选功能

在使用 Element UI 的 el-tree 组件时，可以通过编程方式控制节点的选中状态来实现一键全选和反选的功能。以下是实现这两个功能的示例代码：

<template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      ref="tree"
      :props="defaultProps">
    </el-tree>
    <el-button @click="toggleCheckAll">一键全选</el-button>
    <el-button @click="toggleCheckAll">一键反选</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [
        // ...树形结构的数据
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    toggleCheckAll() {
      const allNodes = this.$refs.tree.getCheckedNodes();
      const treeNodes = this.$refs.tree.getNodes();
      if (allNodes.length === treeNodes.length) {
        // 当前是全选状态，执行反选
        this.$refs.tree.setCheckedNodes([]);
      } else {
        // 执行全选
        this.$refs.tree.setCheckedNodes(treeNodes.map(node => node.data));
      }
    }
  }
};
</script>

在这个示例中，我们定义了两个按钮，分别绑定了 toggleCheckAll 方法。当用户点击任一按钮时，toggleCheckAll 方法会被调用，它会检查当前树中是否所有节点都被选中，如果是，则执行反选操作，否则执行全选操作。

getCheckedNodes 方法用于获取当前被选中的节点列表，而 setCheckedNodes 方法用于设置特定节点的选中状态。通过这种方式，可以轻松实现一键全选和反选的功能。