el-tree展开收起vue3

### Vue 3 中 `el-tree` 组件的展开和收起功能

在 Vue 3 的环境中，Element Plus 是 Element UI 的升级版本，提供了更强大的特性和更好的性能。对于 `el-tree` 组件来说，在实现节点的展开与收起操作上，主要依赖于组件自身的 API 和事件处理机制。

#### 使用 `expand-all` 方法来控制全部节点的状态

通过调用 `el-tree` 提供的实例方法可以轻松管理整个树结构中所有节点的展开状态：

// JavaScript (setup 函数内)
import { ref } from 'vue';
import { ElTree } from 'element-plus';

const treeRef = ref(null);

function expandAll() {
    const nodes = treeRef.value.store.nodesMap;
    Object.keys(nodes).forEach(key => {
        nodes[key].expanded = true;
    });
}

function collapseAll() {
    const nodes = treeRef.value.store.nodesMap;
    Object.keys(nodes).forEach(key => {
        nodes[key].expanded = false;
    });
}

此代码片段展示了如何利用 `ref` 来获取 `el-tree` 实例，并通过遍历其内部存储对象中的每一个节点来进行批量设置它们的扩展属性[^1]。

#### 动态切换单个节点的折叠/展开状态

除了全局性的操作外，还可以针对特定路径下的某个子项执行单独的动作。这通常发生在点击某一行时触发相应的逻辑判断进而改变该行对应的可视性。

<template>
  <div>
    <!-- ... -->
    <el-tree :data="data" node-key="id" default-expand-all @node-click="handleNodeClick">
      <!-- 自定义模板可选项... -->
    </el-tree>
    
    <button type="button" @click="toggleExpand(node)">Toggle Expand</button>
  </div>
</template>

<script setup>
import { defineComponent, reactive } from "vue";

export default defineComponent({
  data() {
    return {
      currentNode: null,
      // ...
    };
  },
  
  methods: {
    handleNodeClick(data) {
      this.currentNode = data.id; // 记录当前被点击节点ID
    },

    toggleExpand(id) {
      let targetNode = this.$refs.tree.getNode(id);
      
      if (!targetNode.isLeaf && !targetNode.expanded) {
          this.$refs.tree.store.defaultExpandedKeys.push(id); // 添加至已打开列表
      }
      else{
          var index = this.$refs.tree.store.defaultExpandedKeys.indexOf(id);
          if(index>-1){
              this.$refs.tree.store.defaultExpandedKeys.splice(index, 1); // 移除自已身
          }
      }

      setTimeout(() => {
          this.$refs.tree.updateKeyChildren(); // 更新视图以反映更改后的默认展开情况
      },0);
    }
  }
});
</script>

这段示例说明了当用户交互发生时（比如鼠标左键单击），可以通过记录下所选中的节点 ID 并据此调整它的可见度；而右侧按钮则用来手动触发展开或收缩动作[^2]。