elementUI树节点全选,反选,半选状态

在Element UI中，可以通过setCheckedKeys方法控制树节点的选中状态。以下是实现全选、反选和半选功能的示例代码：

<template>
  <div>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      ref="tree"
      :default-expanded-keys="defaultExpandedKeys"
      :default-checked-keys="defaultCheckedKeys"
      :props="defaultProps">
    </el-tree>
    <el-button @click="selectAll">全选</el-button>
    <el-button @click="invertSelect">反选</el-button>
    <el-button @click="selectHalf">半选</el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      data: [/* 树形结构的数据 */],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      defaultExpandedKeys: [], // 默认展开的节点
      defaultCheckedKeys: [] // 默认选中的节点
    };
  },
  methods: {
    selectAll() {
      const keys = this.data.map(item => item.id);
      this.$refs.tree.setCheckedKeys(keys);
    },
    invertSelect() {
      const keys = this.$refs.tree.getCheckedKeys();
      this.$refs.tree.setCheckedKeys(this.data.map(item => item.id).filter(key => !keys.includes(key)));
    },
    selectHalf() {
      // 这里可以实现具体的半选逻辑，例如只选中部分节点
      // 这里只是示例，所以直接调用全选
      this.selectAll();
    }
  }
};
</script>

在这个例子中，selectAll 方法会选中所有节点，invertSelect 方法会反选所有节点，selectHalf 方法会模拟半选状态，实际应用中需要根据具体逻辑实现。