当前位置: 首页 > news >正文

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

实现代码:

按钮:

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

组件:

        <el-form-item label="可选择菜单" :label-width="formLabelWidth"><el-treeref="folderTreeRef":data="mneudata"show-checkboxnode-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 这个属性

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

相关文章:

  • Spring Boot多环境配置及Logback日志记录
  • protobuf学习日记 | 认识protobuf中的类型
  • PS为动态GIF添加新背景
  • 广东省第三届职业技能大赛“网络安全项目”B模块--数字取证解析
  • GAN在图像数据增强中的应用
  • 图像处理中常用的距离
  • 【Docker】在centos中安装nginx
  • 电商API接口的大数据分析与挖掘技巧
  • HTML中div内容垂直居中显示
  • 阶段七第二章连接数据库,逻辑控制器,定时器
  • Js-WebAPIs-事件(二)
  • Android ANR 总结
  • 黑客技术(网络安全)自学2024
  • OceanBase集群部署
  • 使用 Apache POI XDGF 读取 vsdx 文件
  • DataBase in Android
  • iOS 系统授权开发
  • java B2B2C 源码多租户电子商城系统-Kafka基本使用介绍
  • Java 网络编程(2):UDP 的使用
  • Laravel 菜鸟晋级之路
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • React as a UI Runtime(五、列表)
  • uni-app项目数字滚动
  • Windows Containers 大冒险: 容器网络
  • 构建工具 - 收藏集 - 掘金
  • 每天一个设计模式之命令模式
  • 前嗅ForeSpider教程:创建模板
  • 试着探索高并发下的系统架构面貌
  • 提升用户体验的利器——使用Vue-Occupy实现占位效果
  • 小程序 setData 学问多
  • 写给高年级小学生看的《Bash 指南》
  • 延迟脚本的方式
  • 自动记录MySQL慢查询快照脚本
  • ​ArcGIS Pro 如何批量删除字段
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (zz)子曾经曰过:先有司,赦小过,举贤才
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (附源码)计算机毕业设计ssm本地美食推荐平台
  • (六)软件测试分工
  • (十七)Flask之大型项目目录结构示例【二扣蓝图】
  • (一)eclipse Dynamic web project 工程目录以及文件路径问题
  • (转载)在C#用WM_COPYDATA消息来实现两个进程之间传递数据
  • 、写入Shellcode到注册表上线
  • .Net Remoting(分离服务程序实现) - Part.3
  • .NET Remoting学习笔记(三)信道
  • .net web项目 调用webService
  • .netcore如何运行环境安装到Linux服务器
  • .NET建议使用的大小写命名原则
  • .Net接口调试与案例
  • .net开发时的诡异问题,button的onclick事件无效
  • @ModelAttribute使用详解
  • @NoArgsConstructor和@AllArgsConstructor,@Builder