element plus 可选择树形组件(el-tree) 怎样一键展开/收起？实现方法详解

在 Element Plus 中，可以使用 el-tree 组件的 expand-all 和 collapse-all 方法来一键展开和收起所有树节点。

以下是一个简单的示例，展示如何使用这些方法：

<template>
  <el-button @click="expandAll">展开所有</el-button>
  <el-button @click="collapseAll">收起所有</el-button>
  <el-tree
    :data="treeData"
    ref="treeRef"
    :props="defaultProps"
    node-key="id"
    default-expand-all
  >
  </el-tree>
</template>
 
<script setup>
import { ref } from 'vue';
 
const treeRef = ref(null);
const treeData = ref([{
  id: 1,
  label: '一级 1',
  children: [{
    id: 4,
    label: '二级 1-1',
  }]
}, {
  id: 2,
  label: '一级 2',
  children: [{
    id: 5,
    label: '二级 2-1',
  }, {
    id: 6,
    label: '二级 2-2',
  }]
}]);
const defaultProps = {
  children: 'children',
  label: 'label'
};
 
const expandAll = () => {
  treeRef.value.store.expandAll(true);
};
 
const collapseAll = () => {
  treeRef.value.store.collapseAll();
};
</script>

在这个示例中，我们定义了一个 el-tree 组件和两个按钮。通过引用 (ref) 我们可以访问组件实例，并调用 expandAll 和 collapseAll 方法来分别展开和收起所有树节点。注意，el-tree 组件的 default-expand-all 属性可以设置为 true 来初始化时展开所有节点。