el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因

1.需求 现在需要一个树状结构的资产树 但是现在需求是 获取当前选中的值的状态是选中还是取消选中 然后再用当前选中 or 取消选中的值 进行 选中 or 取消选中的操作

一开始使用的是  check-change 方法

接收参数如图    但是我勾选父节点 或者 子节点后 他会打印一堆数据 是因为

当你触发了子节点的复选框,如果复选框为全选的状态,因为你的一次触发,导致变为半选的状态,导致会在触发一次父节点的复选框check-change。

反之,假如树节点的复选框是没有选择的状态,由于选择了子节点后,变成了半选的状态,又会触发一次check-change

再者,就是直接选择复选框的话,复选框假如是全选的状态的话,点击树节点的父节点的话,会改变子节点所有的选择,则会触发节点数数量+1(父节点)的check-change次数

总结: Element Plus 的 <el-tree> 组件在处理勾选状态时,会因为级联的勾选逻辑导致 check-change 事件多次触发。直接操作父节点的复选框会影响其所有子节点的勾选状态,从而触发每个子节点的 check-change 事件;而勾选或取消勾选子节点也可能会改变父节点的勾选状态,导致父节点的 check-change 事件被触发。

解决办法  1.

设置为true 但是这样子节点与父节点之间就没关联了 这样就违背了我们的初衷

解决办法  2.

 使用check 可以使用接收的参数来判断当前选中的状态 

  const isChecked = node.checkedKeys.includes(data.id);if (isChecked) {//勾选console.log('勾选');} else {//取消勾选console.log('取消勾选');}

 我们也可以使用 this.$refs.tree.getCheckedNodes() 来获取树节点上的所有勾选的节点过滤进行某些操作 

this.$refs.tree.getCheckedNodes()

 这是vue2 写法 vue3同理 

参考文章 : Element-plus el-tree 触发check-change多次事件

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

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

相关文章

园区智慧能源可视化:智能监控与优化能源管理

通过图扑可视化技术&#xff0c;搭建智慧光伏园区&#xff0c;实时监控园区光伏系统的运行状态&#xff0c;分析数据并优化能源管理&#xff0c;提高发电效率和维护效率&#xff0c;助力园区实现绿色可持续发展。

Java-01-源码篇-04集合-04-Properties

目录 一&#xff0c;简介 二&#xff0c;源码讲解 2.1 Properties 继承结构 2.2 Properties 属性分析 2.3 Properties 构造器 2.4 Properties 加载配置资源文件 2.4.1 load(inputStream) 2.4.2 load(Reader) 2.4.3 load0(LineReader lr) 2.4.4 load测试 2.5 Properti…

电子产品分销商 DigiKey 在新视频系列中探索智能城市中的AI

电子产品分销商DigiKey推出了一系列新视频&#xff0c;深入探讨了AI在智能城市中的集成应用。这个名为“智能世界中的AI”的系列是其“城市数字”视频系列的第四季&#xff0c;它审视了城市环境中从基础设施到公共服务的多种AI硬件和软件的部署情况。 该系列由电子制造商莫仕&…

VMware取消中文支持,替换vSAN解决方案提上日程!

What is vSAN &#xff1f; 是一款软件定义的企业存储解决方案&#xff0c;支持超融合基础架构系统。vSAN与VMware vSphere 完全集成在一起&#xff0c;作为ESXi Hypervisor内的分布式软件层&#xff0c;通过整合、池化ESXi各个主机上的存储资源&#xff0c;为vSphere虚拟化平…

Python静态类型检查工具库之mypy使用详解

概要 在 Python 开发中,类型错误是常见的问题,尤其在大型项目中,类型错误可能导致代码难以调试和维护。为了提高代码的可靠性和可维护性,静态类型检查工具如 mypy 应运而生。mypy 是一个静态类型检查工具,它通过在 Python 代码中添加类型注释,实现编译时的类型检查,帮助…

【数据库】MySQL基本操作语句

目录 一、SQL语句 1.1 SQL分类 1.2 SQL语言规范 1.3 数据库对象与命名 1.3.1 数据库的组件(对象)&#xff1a; 1.3.2 命名规则&#xff1a; 1.4 SQL语句分类 二、基本命令 2.1 查看帮助信息 2.2 查看支持的字符集 2.3 查看默认使用的字符集 2.4 修改默认字符集 2.5…

【Python画图-seaborn驯化】一文学会seaborn画因子变量图catplot函数使用技巧

【Python画图-seaborn驯化】一文学会seaborn画因子变量图catplot函数使用技巧 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关内…

人工智能项目论文复现

文章目录 &#xff08;一&#xff09;技术学习任务Ⅰ、机器学习之聚类1、基本介绍概念2、聚类分析基本介绍3、K均值聚类4、K近邻分类模型(KNN)5、均值漂移聚类6、代码实现7、上述三种算法总结 Ⅱ、机器学习其他常用技术1、决策树基本知识2、异常检测概念3、主成分分析4、决策树…

JVM:介绍

文章目录 一、什么是JVM二、JVM的功能1、解释和运行2、内存管理3、即时编译 三、常见的JVM四、Java虚拟机规范五、HotSpot发展历程 一、什么是JVM JVM的全称为Java Virtual Machine&#xff0c;Java虚拟机。本质上是一个运行在计算机上的程序&#xff0c;职责是运行Java字节码…

python办公自动化之分析日志文件

实现效果&#xff1a;根据关键字xx搜索关键字在日志的占比 前提&#xff1a;把日志保存到txt文件里 代码&#xff1a; # 读取准备好的日志文件log_file log_filelog_file.txt with open(log_file,r) as logfile:textlogfile.readlines() # 设置搜索的关键字&#xf…

相机,手机,行车记录仪及监控视频修复软件: Stellar Repair for Video

天津鸿萌科贸发展有限公司是 Stellar 系列数据恢复软件的授权代理商。 Stellar Repair for Video 是一款强大的工具&#xff0c;用于修复从主流相机品牌&#xff08;如佳能、尼康、索尼&#xff09;、行车记录仪、监控录像机、手机和其他视频设备拍摄的无法访问和损坏的视频。…

下载linux的吐槽

本来这几天放假了&#xff0c;想下一个linux玩一玩 教程&#xff08;我就是根据这个教程进行下载的&#xff0c;但是呢在进行修改BIOS 模式的 地方遇见了困难&#xff0c;也许是电脑修过的原因&#xff0c;我狂按F12 以及 FnF12都没有BIOS设置&#xff0c;只有一个让我选择用w…

面向过程编程详解

目录 前言1. 面向过程编程的定义2. 面向过程编程的特点2.1 过程和函数2.2 顺序执行2.3 全局变量2.4 控制结构 3. 面向过程编程的应用场景3.1 系统级编程3.2 科学计算3.3 小型项目 4. 面向过程编程的优缺点4.1 优点4.2 缺点 5. 代表性的编程语言5.1 C语言5.2 Pascal5.3 Fortran …

PMP 认证权威吗?对项目…业生涯的发展有帮助?

PMP认证到底权威吗&#xff1f; 首先在我看来&#xff0c;PMP认证是否权威要从各个角度进行综合考虑。入行这么多年个人也有不少的体会&#xff0c;那么我们就从多个角度进行分析一下&#xff0c;PMP认证的权威性与促进方面。 在深入探讨这个话题前&#xff0c;我分享一下近期…

DDR3 (四)

1 DDR3 8倍预取 DDR3相比DDR2外部IO时钟又提高了一倍&#xff0c;因此DDR3外部IO时钟是内核时钟的4倍&#xff0c;再加上双沿采样&#xff0c;因此DDR3可以实现8倍预取 2 DDR3 芯片位宽 DDR3使用8倍预取技术&#xff0c;指的是芯片位宽&#xff08;DQ数据线位宽&#xff09…

智慧产业应用实训实践基地-信息类专业实践实验室-嵌入式、物联网、移动互联网、云计算、大数据、人工智能、区块链实训室

智慧产业实践基地面向信息类专业群&#xff0c;以智慧灯杆、智慧交通、智慧设施在智慧产业中的实际实践为项目原型&#xff0c;软硬件开源、开放&#xff0c;海量的技术资料和实训课程。整个系统运用了嵌入式、物联网、移动互联网、云计算、大数据、人工智能、区块链等综合交叉…

收藏!2024年程序员的实用神器_new relic idea

前言 Chat GPT的升级节奏让人们越来越惊讶的同时&#xff0c;也让大家感觉到了压力&#xff0c;在如此快节奏的互联网世界中&#xff0c;开发人员需要不断学习与更新知识&#xff0c;保持领先地位并高效地交付高质量软件。 无论是集成开发环境 (IDE)、版本控制系统、测试工具…

开源网安入选全景图,成为唯一覆盖“开发安全”全领域厂商

​7月4日&#xff0c;知名网络安全媒体数说安全正式发布了《2024年中国网络安全市场全景图》&#xff0c;本次全景图共收录了408家国内优秀的网络安全企业&#xff0c;旨在为网络安全行业主管部门、从业者、产品及服务的使用者和购买单位以及资本机构提供全面、精准且具参考价值…

14-52 剑和诗人26 - RAG 和 VectorDB 简介

检索增强生成 (RAG) 和 VectorDB 是自然语言处理 (NLP) 中的两个重要概念&#xff0c;它们正在突破 AI 系统所能实现的界限。 在这篇博文中&#xff0c;我将深入探讨 RAG&#xff0c;探索其工作原理、应用、优势和局限性。 我们还将研究 VectorDB&#xff0c;这是一种专用于向…

C语言学习笔记[22]:分支语句switch

switch语句 switch语句也是一种分支语句&#xff0c;常用于多分支的情况 switch语句的语法形式是&#xff1a; switch(整型表达式) {语句项; }而语句项是什么呢&#xff1f; case 整型常量表达式:语句; switch语句中的break 对于case 语句来说&#xff0c;我们day输入的多…