el-tree通过default-expand-all动态控制展开/折叠

1、如下图通过勾选框动态控制展开/折叠,全选/清空
在这里插入图片描述
2、实现方式如下:定义key,监听checked2修改treeKey,重新渲染tere;附加全选和清空。

      <div class="tree">
        <el-checkbox v-model="checked1">选中全部</el-checkbox>
        <el-checkbox v-model="checked2">展开全部</el-checkbox>
        <el-tree :key="treeKey" :data="treeData" show-checkbox node-key="id" :props="defaultProps" ref="tree" :default-expand-all="checked2"></el-tree>
      </div>


    watch: {
      // 树形控件全选/清空
      'checked1':function (newVale,oldVale) {
        if(newVale === false) {
          this.$refs.tree.setCheckedKeys([]);//清空
        } else {
          this.$refs.tree.setCheckedNodes(this.treeData);//全选
        }
      },
      // 树形控件展开/折叠
      'checked2':function (newVale,oldVale) {
        this.treeKey = Date.now();//重新渲染树结构,动态控制展开/折叠
      },
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

一场大火烧毁了印度的芯片梦 | 百能云芯

谈起印度的半导体发展史&#xff0c;鲜为人知的是&#xff0c;该国曾有可能成为全球半导体制造业的重要中心。然而&#xff0c;一个意外的事件彻底改变了历史进程&#xff0c;让印度错失了超越台积电的机会。 01半导体制造潜力 在高科技行业&#xff0c;也许很多人都不看好印度…

数据结构-栈和队列

目录 栈的概念 栈的使用 ​编辑 模拟实现栈 中缀表达式转后缀表达式 括号匹配 出栈入栈次序匹配 队列概念 队列的使用 栈的概念 栈是一种特殊的线性表,其只允许在固定的一端进行插入和删除元素的操作.进行数据插入和删除操作的一端称为栈顶,;另一端称为栈底.栈中的数据…

vue 获取设备指纹

import Fingerprint2 from fingerprintjs2 // async 异步请求 async getFingerprint () {return new Promise((resolve, reject) > {Fingerprint2.getV18({}, (result, components) > {resolve(result)})})}, // 获取用户sessionasync getSession () {/* 等待获取设备指纹…

微信小程序真机调试异常cmdId 1006, errCode-50011-已解决

cmdId 1006, errCode-50011 起因 小程序在模拟器上预览没问题,真机调试和体验版首页打不开,点展开显示cmdId 1006, errCode-50011 解决 查了下1006, 说是广告, 我没接广告,这个也不是错误码 1006广告组件被驳回你的广告正在被审核,无法展现广告后来找到几个类似的帖子…

uniapp的逆地理编码 和地理编码

1.先打开高德地图api找到那个 地理编码 2.封装好我们的请求 3.逆地理编码 和地理编码 都是固定的 记住自己封装的请求 就可以了 这个 是固定的 方式 下面这个是固定的 可以复制过去 getlocation就是uniapp提供的 获取经纬度 然后 下面的 就是高德地图提供的 方法 要想使用我…

短视频账号矩阵系统/技术开发搭建私有部署

本系统是基于短视频领域的新一代系统&#xff0c;旨在提供一个高效、全面的短视频管理与分发平台。系统采用先进的开发算法和技术&#xff0c;实现了智能化视频分类、推荐和用户互动功能。 目录 一、抖音SEO账号矩阵系统的开发和部署遵循以下原则&#xff1a; 二、账号矩阵绑…

【数据结构OJ题】链表的中间结点

原题链接&#xff1a;https://leetcode.cn/problems/middle-of-the-linked-list/description/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 快慢指针法 通过快慢指针找到中间结点&#xff0c;快指针每次走两步&#xff0c;慢指针每次走一步&#…

Spark MLlib机器学习库(一)决策树和随机森林案例详解

Spark MLlib机器学习库(一)决策树和随机森林案例详解 1 决策树预测森林植被 1.1 Covtype数据集 数据集的下载地址&#xff1a; https://www.kaggle.com/datasets/uciml/forest-cover-type-dataset 该数据集记录了美国科罗拉多州不同地块的森林植被类型&#xff0c;每个样本…

【ChatGPT 指令大全】怎么使用ChatGPT来辅助知识学习

目录 概念解说 简易教学 深度教学 教学与测验 解释一个主题的背后原理 总结 在当今信息时代&#xff0c;互联网的快速发展为我们获取知识提供了前所未有的便利。而其中&#xff0c;人工智能技术的应用也为我们的学习和交流带来了新的可能性。作为一种基于自然语言处理的人…

Labview控制APx(Audio Precision)进行测试测量(六)

用 LabVIEW 驱动 VIs生成任意波形 在 APx500 应用程序中&#xff0c;默认波形类型为正弦。这是指 APx 内置的正弦发生器&#xff0c;根据信号路径设置&#xff0c;许多测量还允许其他内置波形&#xff0c;如方波&#xff0c;分裂正弦波或分裂相位&#xff0c;以及使用导入的。w…

商城-学习整理-高级-全文检索-ES(九)

目录 一、ES简介1、网址2、基本概念1、Index&#xff08;索引&#xff09;2、Type&#xff08;类型&#xff09;3、Document&#xff08;文档&#xff09;4、倒排索引机制4.1 正向索引和倒排索引4.2 正向索引4.3 倒排索引 3、相关软件及下载地址3.1 Kibana简介3.2 logstash简介…

2023年国赛数学建模思路 - 案例:感知机原理剖析及实现

文章目录 1 感知机的直观理解2 感知机的数学角度3 代码实现 4 建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 感知机的直观理解 感知机应该属于机器学习算法中最简单的一种算法&#xff0c;其…

C 语言的 ctype.h 头文件

C 语言的 ctype.h 头文件包含了很多字符函数的函数原型, 可以专门用来处理一个字符, 这些函数都以一个字符作为实参. ctype.h 中的字符测试函数如表所示: 这些测试函数返回 0 或 1, 即 false 或 true. ctype.h 中的字符映射函数如表所示: 字符测试函数不会修改原始实参, 只会…

构建高性能小程序:优化技巧和最佳实践

第一章&#xff1a;引言 随着移动互联网的快速发展&#xff0c;小程序成为了用户获取信息和进行业务交流的重要平台之一。然而&#xff0c;小程序由于受限于硬件资源和网络环境&#xff0c;开发者需要更加关注性能优化&#xff0c;以提供流畅、高效的用户体验。本文将介绍一些构…

DNS部署与安全详解(下)

文章目录 前言一、指定区域解析配置二、DNS服务器对外名称显示配置三、转发器使用配置四、配置辅助&#xff08;备份&#xff09;服务器五、如何让虚拟机可以真实上网六、为DNS服务器配置别名 前言 上一篇博客我们已经在Windows server2003的虚拟机上下载了DNS软件&#xff0c;…

流量日志分析--实操

[鹤城杯 2021]流量分析 <--第一道流量分析不难,主要就是布尔盲注的流量包分析,直接查看http请求包即可我们可以通过观察看到注入成功的响应长度不同,这里成功的为978字节,失败的994字节.不要问为什么.其实也可以直接判断.978的流量比994的少了非常多 显然就是成功的(因为这里…

HTML详解连载(2)

HTML详解连载&#xff08;2&#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽超链接作用代码示例解释经验分享 音频标签代码示例注意强调 视频标签代码示例注意强调 列表作用&#xff1a;布局内容排列整齐的区域。分类&#xff1a;无序列表&#x…

kafka基本概念及操作

kafka介绍 Kafka是最初由Linkedin公司开发&#xff0c;是一个分布式、支持分区的&#xff08;partition&#xff09;、多副本的 &#xff08;replica&#xff09;&#xff0c;基于zookeeper协调的分布式消息系统&#xff0c;它的最大的特性就是可以实时的处理大量数据以满足各…

uniapp安卓ios打包上线注意事项

1、安卓包注意事项 隐私政策弹框提示 登录页面隐私政策默认不勾选隐私政策同意前不能获取用户权限APP启动时&#xff0c;在用户授权同意隐私政策前&#xff0c;APP及SDK不可以提前收集和使用IME1、OAID、IMS1、MAC、应用列表等信息 ios包注意事项 需要有注销账号的功能 3、安…

PHP8的字符串操作2-PHP8知识详解

今日继续分享《php8的字符串操作》昨天一天都没有写多少&#xff0c;内容多&#xff0c;今天继续&#xff1a; 昨天分享的是1、使用trim()、rtrim()和ltrim()函数去除字符串首尾空格和特殊字符。2、使用strlen()函数和mb_strlen()函数获取字符串的长度。 3、截取字符串 PHP对…