VUE3 + Elementui-Plus 之 树形组件el-tree 一键展开（收起）；一键全选（不全选）

在Vue 3和Element Plus中，可以通过组合API和Element Plus的方法来实现对el-tree组件的一键展开/折叠、一键全选/不全选的功能。以下是实现这些功能的示例代码：

<template>
  <el-button @click="toggleExpandAll">一键展开</el-button>
  <el-button @click="toggleFoldAll">一键折叠</el-button>
  <el-button @click="toggleCheckAll">一键全选</el-button>
  <el-button @click="toggleNoCheck">一键不全选</el-button>
  <el-tree
    ref="tree"
    :data="treeData"
    :props="defaultProps"
    show-checkbox
    node-key="id"
  >
  </el-tree>
</template>
 
<script setup>
import { ref } from 'vue';
import { ElTree } from 'element-plus';
 
const treeData = 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 toggleExpandAll = () => {
  ElTree.expandAll(tree.value);
};
 
const toggleFoldAll = () => {
  ElTree.foldAll(tree.value);
};
 
const toggleCheckAll = () => {
  ElTree.checkAll(tree.value);
};
 
const toggleNoCheck = () => {
  ElTree.uncheckAllNodes(tree.value);
};
 
const tree = ref(null);
</script>

在这个示例中，我们定义了一个树形数据treeData和对应的节点标识defaultProps。然后，我们使用了ElTree.expandAll、ElTree.foldAll、ElTree.checkAll和ElTree.uncheckAllNodes这些Element Plus提供的方法来分别实现一键展开、一键折叠、一键全选和一键不全选的功能。这些方法都需要传入el-tree组件的实例，这里通过ref="tree"获取。

注意：在实际使用时，请确保Element Plus版本是最新的，并且已正确安装。