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

Z_BL

已于 2024-01-16 10:46:33 修改

阅读量3.6k

点赞数 21

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript elementui

于 2024-01-16 10:44:59 首次发布

本文链接：https://blog.csdn.net/Z_B_L/article/details/135617927

本文介绍了如何在Vue应用中使用el-tree组件实现展开和收起所有节点的功能，通过ref绑定和store的_getAllNodes属性来控制节点状态。尽管官方文档未详述，但实际操作显示这是一种有效的方法。

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

实现代码：

按钮：

<el-button @click="takeall" style="height: 24px">
    {{zhanstatus % 2 != 0 ? "收起所有" : "展开所有"}}
</el-button>

组件：

        <el-form-item label="可选择菜单" :label-width="formLabelWidth">
          <el-tree
            ref="folderTreeRef"
            :data="mneudata"
            show-checkbox
            node-key="id"
            highlight-current
            :props="defaultProps"
          />
        </el-form-item>

在ref中绑定folderTreeRef

展开&收起：

const folderTreeRef = ref(null);
const zhanstatus = ref(0);
let takeall = () => {
  zhanstatus.value++;
  if (zhanstatus.value % 2 == 0) {
    const nodes = folderTreeRef.value.store._getAllNodes();
    nodes.forEach(item => {
      item.expanded = false;
    });
  } else {
    const nodes = folderTreeRef.value.store._getAllNodes();
    nodes.forEach(item => {
      item.expanded = true;
    });
  }
};

效果：