vue3 - element-plus树形控件el-tree快捷全选、反选、清除选择功能，Tree树形控件组件实现点击按钮一键全勾选和一键全取消勾选快捷按钮（详细示例运行源码，一键复制开箱即用！）

在Vue 3和Element Plus中，您可以通过自定义按钮和使用el-tree组件的getCheckedKeys、setCheckedKeys和getHalfCheckedKeys方法来实现快捷全选、反选和清除选择的功能。以下是一个简单的示例：

<template>
  <div>
    <el-button @click="toggleSelectAll">全选/反选</el-button>
    <el-button @click="clearSelection">清除选择</el-button>
    <el-tree
      :data="data"
      :props="defaultProps"
      ref="tree"
      show-checkbox
      node-key="id"
    >
    </el-tree>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTree, ElButton } from 'element-plus';
 
const data = ref([{
  id: 1,
  label: '一级 1',
  children: [{
    id: 4,
    label: '二级 1-1',
  }]
}, {
  id: 2,
  label: '一级 2',
  children: [{
    id: 5,
    label: '二级 2-1',
  }]
}]);
 
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
const toggleSelectAll = () => {
  const allKeys = [
    ...(this.$refs.tree.store.getCheckedKeys() || []),
    ...(this.$refs.tree.store.getHalfCheckedKeys() || [])
  ];
  if (allKeys.length === this.$refs.tree.store.data.length) {
    this.$refs.tree.setCheckedKeys([]);
  } else {
    this.$refs.tree.setCheckedKeys(this.$refs.tree.store.data.map(item => item.id));
  }
};
 
const clearSelection = () => {
  this.$refs.tree.setCheckedKeys([]);
};
</script>

在这个示例中，我们定义了一个树形控件和相关的数据结构。我们使用el-button组件添加了三个按钮，分别用于全选、反选和清除选择。在el-tree组件中，我们使用ref属性来引用树形控件，并启用show-checkbox来显示复选框。

toggleSelectAll函数通过获取当前已选中的节点和半选中的节点，如果已经选择了所有节点，则清空选择；否则，选择所有节点。

clearSelection函数直接清空选择。注意，这些函数应在Vue 3的<script setup>标签中定义，并且需要确保Element Plus版本与Vue 3兼容。