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

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

实现代码:

按钮:

<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;
    });
  };
};

效果:

实现原理:

打印上面的 folderTreeRef ,可以从原型链的store中找到 _getAllNodes 属性

官方文档好像没有描述关于此属性的内容,查了好多资料,搜了多篇文章,可以发现store原型中有_getAllNodes 这个属性

稍微试了一下居然成功了 (๑ᵒ̴̶̷͈᷄ᗨᵒ̴̶̷͈᷅)

目录
相关文章
|
JavaScript
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点
367 0
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
603 1
|
2月前
element中tree组件的选中获取和返显
本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中(返显)。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点,然后使用`setCheckedKeys()`方法来设置默认选中的节点。
168 2
element中tree组件的选中获取和返显
|
3月前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
52 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
Element中树形控件在项目中的实际应用
这篇文章介绍了Element UI中树形控件的实际应用,包括使用目的、官网组件介绍、组合使用组件案例以及在项目中的具体实现方法和效果展示。
|
4月前
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
Element UI 树形控件Tree 【详解】el-tree 展开指定节点,判断是否存在指定节点
828 0
|
4月前
|
前端开发 JavaScript
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
【定制需求】el-tree 树形控件实现:每级可单独选择,选择父级不选中子集,子集全部选中不自动选中父级,手写按钮可支持子集全选,以及取消子集全选,el-tree 树形控件取消父子级联动选择
294 0
element组件里的tree树形控件的使用?
element组件里的tree树形控件的使用?
|
前端开发 JavaScript
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
饿了么UI中el-tree中的树节点选中高亮的两种常用方式(highlight-current属性)
455 0
|
6月前
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?
Vue3组件库 -- element plus 树形选择器组件怎样显示已有的树形菜单?
96 0