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.mzph.cn/news/628953.shtml

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

相关文章

harbor https

harbor https部署 准备docker-compose安装https 证书harbor安装访问harbor推镜像到harbor 准备 192.168.112.99&#xff0c;harbor&#xff0c;centos7 192.168.112.3&#xff0c;测试机&#xff0c;centos7 docker版本&#xff1a;docker-ce 20.10.16&#xff08;部署参考&a…

Redis主从+哨兵集群(基于CentOS-8.0)高可用部署方案

目录 一、环境描述 二、Redis 主从集群部署 2.1 Redis下载 2.2 Redis解压 和移动文件 2.4 编译、安装Redis 2.6 新建 bin 和 etc 文件夹 2.7 分发Redis 2.8 配置 2.8.1 主节点配置 2.8.2 从节点配置 2.9 启动Redis服务 2.10 验证主从服务 2.11 查看节点角色信息 2…

有序矩阵中第 K 小的元素

题目链接 有序矩阵中第 K 小的元素 题目描述 注意点 每行和每列元素均按升序排序找到一个内存复杂度优于 O(n) 的解决方案 解答思路 使用二分查找&#xff0c;思路为&#xff1a; &#xff08;1&#xff09;因为左上角的元素值更小&#xff0c;右下角的元素值更大&#xf…

初识 Elasticsearch 应用知识,一文读懂 Elasticsearch 知识文集(5)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

【Mybatis】说一下 mybatis 的一级缓存和二级缓存

​ &#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Mybatis ⛳️ 功不唐捐&#xff0c;玉汝于成 ​ 目录 前言 正文 一级缓存&#xff08;Local Cache&#xff09;&#xff1a; 范围&#xff1a; 生命周期&#xff1a; 默认开启&…

C++实战Opencv第一天——win11下配置vs,opencv环境和运行第一个c++代码(从零开始,保姆教学)

OpenCV&#xff08;Open Source Computer Vision Library&#xff09;是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了大量的通用算法和功能&#xff0c;用于处理图像和视频数据。C 通常提供比 Python 更高的执行速度&#xff0c;对于需要高性能处理的任务&#x…

QT 文本框的绘制与复选框组键

.cpp文件 #include "widget.h" #include "ui_widget.h"#include<QDebug> Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//更改窗口标题setWindowTitle("我爱xyy");//更改图标setWindow…

使用VSCode内的jupyter编写R语言:绘制中国省份地区热力图

R语言绘制中国省份地区热力图教程 1、R语言的安装和编辑器的选择 对于一门从未接触过的编程语言&#xff0c;相信大家的吐槽点和我一样&#xff1a;又要安装软件&#xff0c;配置环境&#xff01;其实R语言的安装和环境配置并不复杂&#xff0c;只需要安装两部分内容&#xf…

IC验证——perl脚本ccode_standard——c代码寄存器配置标准化

目录 1 脚本名称 2 脚本路径 3 脚本参数说明 4 脚本操作说明 5 脚本代码 1 脚本名称 ccode_standard 2 脚本路径 /scripts/bin/ccode_standard 3 脚本参数说明 次序 参数名 说明 1 address (./rfdig&#xff1b;.&#xff1b;..&#xff1b;./boot) 指定脚本执行路…

【小笔记】用tsai库实现Rocket家族算法

2024.1.16 Rocket家族算法是用于时间序列分类的强baseline&#xff08;性能比较参考【小笔记】时序数据分类算法最新小结&#xff09;&#xff0c;Rocket/MiniRocket/MultiRocket官方都有开源实现&#xff0c;相比较而言&#xff0c;用tsai来实现有三个好处&#xff1a;1是快速…

WPF应用程序生存期以及相关事件

WPF 应用程序的生存期会通过 Application 引发的几个事件来加以标记&#xff0c;相关事件对应着应用程序何时启动、激活、停用和关闭。 应用程序生存期事件 • 独立应用程序(传统风格的 Windows 应用程序&#xff0c;这些应用程序作为要安装到客户端计算机并从客户端计算机运…

VitePress-01-从零开始的项目创建(npm版)

说明 本文介绍一下 VitePress的项目创建的步骤。 主要用到的命令工具是 npm。 本文的操作步骤是从无到有的创建一个完整的基本的【VitePress】项目。 环境准备 根据官方文档的介绍&#xff0c;截止本文发稿时&#xff0c;需要使用node.js 18 的版本。 可以使用node -v 的命令查…

关于java的封装

关于java的封装 我们在前面的文章中&#xff0c;了解到了类和对象的知识&#xff0c;以及做了创建对象的时候对内存的分析&#xff0c;我们本篇文章来了解一下面向对象的三大基本特征之一&#xff0c;封装&#x1f600;。 一、初识封装 封装就好比&#xff0c;我们把一些物品…

【操作系统】1. 操作系统概述

文章目录 【 1. 什么是操作系统 】【 2. 操作系统软件的分类 】【 3. 操作系统内核的抽象和特征 】3.1 操作系统内核的抽象3.2 操作系统内核的特征 【 1. 什么是操作系统 】 操作系统是管理硬件资源、控制程序运行、改善人机界面和为应用软件提供服务的一种系统 软件。一个服务…

<软考高项备考>《论文专题 - 71 风险管理(3)》

3 过程2-识别风险 3.1 问题 4W1H过程做什么是识别单个项目风险以及整体项目风险的来源&#xff0c;并记录风险特征的过程。作用:1、记录现有的单个项目风险&#xff0c;以及整体项目风险的来源:2、汇总相关信息&#xff0c;以便项目团队能够恰当地应对已识别的风险。为什么做…

怎么修改或移除WordPress后台仪表盘概览底部的版权信息和主题信息?

前面跟大家分享『WordPress怎么把后台左上角的logo和评论图标移除&#xff1f;』和『WordPress后台底部版权信息“感谢使用 WordPress 进行创作”和版本号怎么修改或删除&#xff1f;』&#xff0c;其实在WordPress后台仪表盘的“概览”底部还有一个WordPress版权信息和所使用的…

项目解决方案:“ZL铁路轨行车辆”实时视频监控系统

目 录 一、建设背景 1.1 政策背景 1.2 现状 二、建设目标 三、建设依据 四、建设原则 4.1经济高效性 4.2系统开放性 4.3系统继承性 4.4系统扩展性 4.5系统经济性 4.6系统安全性 五、系统架构 5.1系统架构图 5.2技术架构 1、DVS 2、中心管理服务…

【Java SE语法篇】11.异常

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ 文章目录 1. 异常的概念和体系结构1.1 异常的概念1.2 异常体系…

PTA——7-31 三角形判断

7-31 三角形判断 (15分) 给定平面上任意三个点的坐标(x​1​​,y​1​​)、(x​2​​,y​2​​)、(x​3​​,y​3​​)&#xff0c;检验它们能否构成三角形。 输入格式: 输入在一行中顺序给出六个[−100,100]范围内的数字&#xff0c;即三个点的坐标x​1​​、y​1​​、x​2​…

SUKER书客重磅发布全新系列:书客Sun立式护眼台灯,护眼养眼新境界

近日&#xff0c;国内知名的光学国货品牌——SUKER书客在2024年新品发布上&#xff0c;正式发布了全新系列的书客Sun立式护眼台灯。 SUKER书客作为近年来快速发展的创新型光学技术品牌&#xff0c;曾推出的一系列产品都取得了刷新行业标准的成绩&#xff0c;他们坚持以创新为动…