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 这个属性

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/414840.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

STM32 基本定时器反转LED

引脚是什么为什么要初始化引脚&#xff1f; 在嵌入式系统中&#xff0c;引脚是微控制器或微处理器上的物理引脚&#xff0c;用于连接外部设备、传感器或其他芯片。每个引脚都有特定的功能和用途&#xff0c;例如输入、输出、模拟输入、电源供应等。STM32F103C8T6引脚图&#xf…

【PyTorch】PyTorch之Reduction Ops

文章目录 前言一、ARGMAX二、ARGMIN三、AMAX和AMIN四、ALL和ANY五、MAX和MIN六、MEAN七、MEDIAN八、NORM九、PROD十、STD十一、SUM十二、UNIQUE十三、VAR 前言 介绍pytorch的Reduction Ops。 一、ARGMAX torch.argmax(input, dim, keepdimFalse) → LongTensor Parameters&a…

(2023版)斯坦福CS231n学习笔记:DL与CV教程 (12) | 视觉模型可视化与可解释性(Visualizing and Understanding)

前言 &#x1f4da; 笔记专栏&#xff1a;斯坦福CS231N&#xff1a;面向视觉识别的卷积神经网络&#xff08;23&#xff09;&#x1f517; 课程链接&#xff1a;https://www.bilibili.com/video/BV1xV411R7i5&#x1f4bb; CS231n: 深度学习计算机视觉&#xff08;2017&#xf…

Java多线程并发篇----第二十三篇

系列文章目录 文章目录 系列文章目录前言一、在 java 中守护线程和本地线程区别二、线程与进程的区别?三、什么是多线程中的上下文切换?四、死锁与活锁的区别,死锁与饥饿的区别?前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。…

c4d阿诺德怎么渲染高清图片

c4d作为也可热门建模工具&#xff0c;该渲染器支持多种渲染器使用&#xff0c;很多人在选择阿诺德渲染器是出现了高清图片无法渲染的问题&#xff0c;阿诺德可提供逼真的光影效果和物理材质&#xff0c;那么怎么利永阿诺德渲染高清的图片呢&#xff0c;一起来简单看看吧。 c4d阿…

设计模式篇章(4)——十一种行为型模式

这个设计模式主要思考的是如何分配对象的职责和将对象之间相互协作完成单个对象无法完成的任务&#xff0c;这个与结构型模式有点像&#xff0c;结构型可以理解为静态的组合&#xff0c;例如将不同的组件拼起来成为一个更大的组件&#xff1b;而行为型更是一种动态或者具有某个…

C++ 设计模式之观察者模式

【声明】本题目来源于卡码网&#xff08;题目页面 (kamacoder.com)&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【设计模式大纲】 前面的文章介绍了创建型模式和结构型模式&#xff0c;今天开始介绍行为型模式。 【简介】什么是…

第三讲_ArkTS的初识

ArkTS的初识 1. ArkTS的基本组成2. ArkTS自定义组件 1. ArkTS的基本组成 装饰器&#xff1a; 用于装饰类、结构、方法以及变量&#xff0c;并赋予其特殊的含义。自定义组件&#xff1a;可复用的UI单元&#xff0c;可组合其他组件&#xff0c;图示中Component装饰的struct Hello…

Windterm使用总结

Windterm是一款部分开源的终端软件&#xff0c;目前作者又开始更新了&#xff0c;目前最新版本WindTerm 2.6.0 Prerelease 10。下载地址&#xff1a;https://github.com/kingToolbox/WindTerm/releases 自己遇到的使用问题总结如下。 1. telnet登录设备&#xff0c;按退格键无…

python爬虫--网页代码抓取

我回来了。 目录 前言一、爬虫是什么&#xff1f;二、使用步骤代码讲解第一版第二版第三版 总结 前言 爬虫&#xff0c;第一章 一、爬虫是什么&#xff1f; 爬虫是指一种自动化程序&#xff0c;通常被用于互联网上的数据采集。这些程序会模拟人类用户的行为&#xff0c;通过…

归并排序详解

目录 ​&#x1f4a1;基本思想 &#x1f4a1;图文介绍 &#x1f4a1;动图演示 &#x1f4a1;过程解释 &#x1f4a1;代码实现 &#x1f4a1;递归实现 &#x1f4a1;非递归实现 &#x1f4a1;总结 &#x1f4a1;基本思想 归并排序&#xff08;MERGE-SORT&#xff09;是…

SpringBoot——纯注解配置的Spring

1.环境搭建 1.1.创建工程 拷贝ssm工程&#xff1a; 1.2.待改造的问题 我们发现&#xff0c;之所以我们现在离不开xml配置文件&#xff0c;是因为我们有一处很关键的配置&#xff0c;如果他要也能用注解配置&#xff0c;那么我们就可以脱离xml文件了&#xff1a; 1.2.1.jdbc…