el-tree 树的全部展开和收起

最新推荐文章于 2025-04-28 10:16:30 发布

weixin_46156770

最新推荐文章于 2025-04-28 10:16:30 发布

阅读量9.1k

点赞数 4

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/122696483

版权

vue 同时被 2 个专栏收录

41 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

在Vue.js项目中，使用el-tree组件构建的架构树需要添加全展开和全收起功能。通过深入研究和参考他人经验，成功实现了这一需求。关键在于访问并操作$refs.tree.store的expanded属性来控制节点的展开和折叠状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

架构树el-tree需要实现全部展开和全部收起功能，查阅资料借鉴别人的经验终于实现
在这里插入图片描述
this.$refs.tree.store 打印出来的是这样的数据，里面的expanded就是控制展开收起的功能

<div class="expand">
            <el-button size="small" @click="expandHandle">{{
              expandAll ? "全部收起" : "全部展开"
            }}</el-button>
          </div>
          <div class="func">
            <span>资源名称</span>
            <span>资源类型</span>
          </div>
          <el-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-expand-all="expandAll"
            :default-expanded-keys="defaultExpandedKeys"
            :expand-on-click-node="false"
            ref="tree"
            @check="handleCheck"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span>{{ data.type }}</span>
            </span>
          </el-tree>

methods方法
expandHandle() {
      console.log(this.$refs.tree.store);
      this.expandAll = !this.expandAll;
      this.expandNodes(this.$refs.tree.store.root);
    },
    // 遍历树形数据，设置每一项的expanded属性，实现展开收起
    expandNodes(node) {
      node.expanded = this.expandAll;
      for (let i = 0; i < node.childNodes.length; i++) {
        node.childNodes[i].expanded = this.expandAll;
        if (node.childNodes[i].childNodes.length > 0) {
          this.expandNodes(node.childNodes[i]);
        }
      }
    },