element-plus的el-tree全选，清空，反选

Element Plus 的 `el-tree` 组件提供了一个高度可定制的数据驱动树形控件，其中包含丰富的功能，包括全选、清空和反选操作。以下是关于这些功能的基本解释：

1. **全选** (All Select): 可以通过点击顶部节点的复选框，或者设置相应的事件处理器，实现树中所有子节点的选中状态同步更新。这通常需要配合 `check` 或 `check-strictly` 属性以及 `default-checked-keys` 或 `default-checked` 数据属性来配置。

2. **清空选择** (Clear Selection): 当用户希望清除当前的所有选中项时，可以触发 `clearSelection` 方法或者监听 `@selection-change` 事件，然后手动将 `checkedKeys` 或者全局的 `selectedKeys` 设置为空数组。

3. **反选** (Invert Selection): 如果希望所有非选中的项变成选中，而选中的项变为未选中，同样可以使用 `clearSelection` 然后添加所有其他非选中的节点到 `checkedKeys` 中，或者在事件处理器中对当前选中的键进行取反操作。

要实现上述操作，你需要在组件的实例上绑定这些方法，并根据实际需求调用它们。例如：

<template>
  <el-tree :data="treeData" @selection-change="handleSelectionChange">
    <!-- ... -->
  </el-tree>
</template>

<script>
export default {
  methods: {
    handleSelectionChange(selectedKeys) {
      // 全选、清空、反选处理
      if (this.toggleAll) {
        selectedKeys.length ? this.clearSelection() : this.selectAll()
      } else {
        // 反选逻辑
        const allKeys = this.treeData.map(item => item.key);
        selectedKeys.length && this.checkKey(notifyKeys(allKeys, selectedKeys))
      }
    },
    selectAll() {
      // 设置所有节点选中
      this.$refs.tree.setCheckedKeys([...allKeys])
    },
    clearSelection() {
      this.$refs.tree.setCheckedKeys([])
    },
    checkKey(keys) {
      keys.forEach(key => this.$refs.tree.setChecked(key, true))
    }
  }
}
</script>