Element Plus Tree组件实现展开折叠

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

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

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中利用ElementPlusTree组件进行树形数据的展开和折叠操作。通过`expandHandle`函数，可以批量设置节点的展开状态，参数`isExpand`用于控制节点的展开（true）或折叠（false）。该方法遍历了树的所有节点并更新它们的展开状态，从而实现动态控制Tree组件的显示效果。

Element Plus Tree组件实现展开折叠

<el-tree ref="treeRef"/>

 /**
 * 展开折叠tree
 * @param isExpand 控制展开折叠  展开：true、折叠：false
 */
const expandHandle = function (isExpand) {
   let nodes = treeRef.value.store.nodesMap;
    for (const node in nodes) {
        nodes[node].expanded = isExpand;
    }
}