vue3 - element-plus树形控件el-tree快捷全选、反选

<template>
  <div>
    <!-- 全选/取消全选 按钮 -->
    <el-button @click="toggleCheckAll">
      {{ isAllChecked ? '取消全选' : '全选' }}
    </el-button>
    
    <!-- el-tree 树控件 -->
    <el-tree
      ref="treeRef"
      :data="treeData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      highlight-current
    ></el-tree>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 树的数据
    const treeData = ref([
      { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
      { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }] },
      { id: 3, label: '一级 3', children: [{ id: 6, label: '二级 3-1' }] }
    ]);

    // 全选状态
    const isAllChecked = ref(false);

    // 树的引用
    const treeRef = ref(null);

    // 切换全选状态
    const toggleCheckAll = () => {
      if (isAllChecked.value) {
        // 取消全选
        treeRef.value.setCheckedKeys([]);
      } else {
        // 全选，获取所有节点的key
        const allKeys = getAllKeys(treeData.value);
        treeRef.value.setCheckedKeys(allKeys);
      }
      // 切换全选状态
      isAllChecked.value = !isAllChecked.value;
    };

    // 获取所有节点的 key
    const getAllKeys = (nodes) => {
      let keys = [];
      nodes.forEach(node => {
        keys.push(node.id);
        if (node.children) {
          keys = keys.concat(getAllKeys(node.children));
        }
      });
      return keys;
    };

    return {
      treeData,
      treeRef,
      toggleCheckAll,
      isAllChecked,
      defaultExpandedKeys: [1, 2, 3] // 默认展开的节点
    };
  }
};
</script>

在Vue 3中使用Element Plus的`el-tree`组件来实现全选功能，可以通过以下步骤完成。`el-tree`本身并没有直接提供“全选”的选项，但我们可以通过编程控制所有节点的选中状态。

### 步骤

1. **添加一个按钮**来触发全选或取消全选功能。
2. 使用`setCheckedKeys`方法来控制`el-tree`中选中节点的ID。
3. 使用一个`ref`来控制当前的全选状态（即全选和取消全选的切换）。

### 示例代码


<template>
  <div>
    <!-- 全选/取消全选 按钮 -->
    <el-button @click="toggleCheckAll">
      {{ isAllChecked ? '取消全选' : '全选' }}
    </el-button>
    
    <!-- el-tree 树控件 -->
    <el-tree
      ref="treeRef"
      :data="treeData"
      show-checkbox
      node-key="id"
      :default-expanded-keys="defaultExpandedKeys"
      highlight-current
    ></el-tree>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 树的数据
    const treeData = ref([
      { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
      { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }] },
      { id: 3, label: '一级 3', children: [{ id: 6, label: '二级 3-1' }] }
    ]);

    // 全选状态
    const isAllChecked = ref(false);

    // 树的引用
    const treeRef = ref(null);

    // 切换全选状态
    const toggleCheckAll = () => {
      if (isAllChecked.value) {
        // 取消全选
        treeRef.value.setCheckedKeys([]);
      } else {
        // 全选，获取所有节点的key
        const allKeys = getAllKeys(treeData.value);
        treeRef.value.setCheckedKeys(allKeys);
      }
      // 切换全选状态
      isAllChecked.value = !isAllChecked.value;
    };

    // 获取所有节点的 key
    const getAllKeys = (nodes) => {
      let keys = [];
      nodes.forEach(node => {
        keys.push(node.id);
        if (node.children) {
          keys = keys.concat(getAllKeys(node.children));
        }
      });
      return keys;
    };

    return {
      treeData,
      treeRef,
      toggleCheckAll,
      isAllChecked,
      defaultExpandedKeys: [1, 2, 3] // 默认展开的节点
    };
  }
};
</script>


### 说明

- **`toggleCheckAll`** 方法中，根据`isAllChecked`状态来决定是全选还是取消全选。
- **`getAllKeys`** 方法用于递归获取所有节点的ID，将它们传递给`setCheckedKeys`以全选。
- **`defaultExpandedKeys`** 用于设置默认展开的节点（可选，根据需求）。

这样，点击按钮可以实现`el-tree`组件的全选和取消全选功能。