vue element-plus el-tree树型组件，展开收起

最新推荐文章于 2025-09-11 04:50:23 发布

原创最新推荐文章于 2025-09-11 04:50:23 发布 · 2.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

html 同时被 3 个专栏收录

13 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

element

3 篇文章

订阅专栏

本文介绍如何在JavaScript中实现一个树形结构的展开与收起功能，利用Vue.js的`el-tree`组件，通过改变`default-expanded-keys`实现节点的全选与全折叠。关键在于维护一个`expandArr`数组来存储展开的节点，并更新`expandText`以显示当前状态。

在js上写下一下代码

// 展开收起树
  const expandTree = () => {
    expandBoolean.value = !expandBoolean.value
    expandText.value = expandBoolean.value ? '全部收起' : '全部展开'
    let nodes = tree.value.store.nodesMap
    console.log('nodes', tree.value.store)
    for (let i in nodes) {
      nodes[i].expanded = expandBoolean.value
    }
  }

html部分

<div>
          <el-input
            v-model="searchKey"
            placeholder="请输入关键字进行过滤"
            style="width: 260px; height: 32px; padding: 20px 0px 10px 15px"
          />
          <p class="aside-text" @click="expandTree">{{ expandText }}</p>
          <div class="tree-block">
            <el-tree
              ref="tree"
              :data="treeData"
              :props="defaultProps"
              node-key="label"
              :default-expanded-keys="expandArr"
              :default-expand-all="expandBoolean"
              highlight-current
              :filter-node-method="filterMethod"
              @node-click="handleNodeClick"
          /></div>
        </div>

这里需要注意下如果要实现上面expandTree的展开收起树的方法，需要 :default-expanded-keys="expandArr" 这句话并在js定义expandArr未空数组，这样展开收起就可以了