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 数据安全/隐私保护
vue3+element-plus权限控制实现(el-tree父子级不关联情况处理)
后台管理系统常见的权限控制需求,这里讲button实现交互细节处理, 取消选中子级menu/button,父级不关联取消; 选中/取消父级catalog/menu,子级全部选中/取消; 选中/取消部分子级menu/button,父级关联半选中状态(indeterminate=true);
608 2
【el-tree】树形结构拖拽,拖动修改分组
【el-tree】树形结构拖拽,拖动修改分组
1111 1
element-plus:el-table自定义展开图标处于列的位置
element-plus:el-table自定义展开图标处于列的位置
1112 0
|
JavaScript
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
2802 1
Element-ui中 使用图片查看器(el-image-viewer) 预览图片
|
API
vue3.0 router路由跳转传参(router.push)
vue3.0 router路由跳转传参(router.push)
1282 0
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
el-tree技巧之只能选中最后一层级的子节点以及查找树结构第一个无子节点的叶节点
|
数据格式
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
本文介绍了在ElementUI和ElementPlus中使用`el-table`组件实现合并行功能的技巧,包括多列合并和单列合并的方法,并提供了相应的示例代码和运行效果。
9158 1
使用小技巧实现el-table组件的合并行功能,ElementUI和ElementPlus都适用
|
前端开发 虚拟化
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
这篇文章分享了作者使用ElementPlus的虚拟化树形控件`el-tree-v2`的心得,展示了其基本用法和如何通过自定义模板来增强树节点的交互性。
3731 1
简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得
|
11月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3954 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
element中tree组件的选中获取和返显
本文介绍了如何在Element UI的tree组件中获取选中的节点值以及如何进行节点的默认选中(返显)。主要通过使用`getCheckedKeys()`和`getHalfCheckedKeys()`方法来获取完全和半选中的节点,然后使用`setCheckedKeys()`方法来设置默认选中的节点。
1219 2
element中tree组件的选中获取和返显