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;助力园区实现绿色可持续发展。

记录Linux安装go环境的一个坑

首先下载Linux安装包&#xff0c;然后解压配置环境变量即可&#xff0c;参考官网。如下&#xff1a; rm -rf /usr/local/go && tar -C /usr/local -xzf go1.22.5.linux-amd64.tar.gz可以说是简单至极了&#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虚拟化平…

在内网互通的服务器中自由跳转与数据管理

在服务器中自由跳转与数据管理&#xff1a;实用命令指南 在管理或使用集群服务器环境时&#xff0c;高效地在不同节点间跳转、执行命令以及数据的相互拷贝是日常操作的重要组成部分。 1. 在集群节点间自由跳转&#xff1a;SSH&#xff08;Secure Shell&#xff09; SSH 是实…

WIN32核心编程 - 线程操作(三) 线程优先级 - 生产者与消费者模式

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页 目录 线程优先级和调度 生产者与消费者模式 关键概念 实现细节 案例描述(一对一) 案例描述(多对一) 线程优先级和调度 在Windows操作系统中&#xff0c;线程优先级与进程优先级共同决定了线程的…

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 …

PHP数据结构之栈

本文由 ChatMoney团队出品 栈&#xff08;Stack&#xff09;是一种后进先出&#xff08;Last In First Out, LIFO&#xff09;的数据结构&#xff0c;它只允许在一端&#xff08;称为栈顶&#xff09;进行插入和删除操作。栈的应用非常广泛&#xff0c;例如在编程语言的函数调用…

LLM推理优化技术方向小结

LLM推理优化我认为总共可以分为以下几个方面&#xff1a; 优化KV Cache MQAGQAMLA调度 Continuous batchingKIMI的调度系统Mooncake魔改模型结构或者魔改 attention 计算 MOE架构flash attentionpaged attention量化 AWQGPTQ其他角度 一次解码 n 个 token 来尽可能充分利用子回…

wget pip git下载失败报错解决

文章目录 前言wgetpipgit 前言 三种常用的工具wget pip git下载失败报错解决 wget wget身份认证报错&#xff1a; ERROR: cannot verify sourceforge.net’s certificate 解决&#xff1a; 增加 --no-check-certificate 选项 配置代理后wget报错&#xff1a; Proxy tunneli…

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

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