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.rhkb.cn/news/372406.html

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

相关文章

理解JS与多线程

理解JS与多线程 什么是四核四线程&#xff1f; 一个CPU有几个核它就可以跑多少个线程&#xff0c;四核四线程就说明这个CPU同一时间最多能够运行四个线程&#xff0c;四核八线程是使用了超线程技术&#xff0c;使得单个核像有两个核一样&#xff0c;速度比四核四线程有多提升。…

Vivado FFT IP核使用

1. 今日摸鱼任务 学习Vivado FFT IP核的使用 Vivado_FFT IP核 使用详解_vivado fft ip核-CSDN博客 这篇写的很详细啦 简单做一点笔记进行记录 2. FFT IP核 xfft_0 ff (.aclk(aclk), // input wire aclk.aresetn(aresetn)…

C++编译链接原理

从底层剖析程序从编译到运行的整个过程 三个阶段 一、编译阶段二、链接阶段三、运行阶段 为了方便解释&#xff0c;给出两端示例代码&#xff0c;下面围绕代码进行实验&#xff1a; //sum.cpp int gdata 10; int sum(int a,int b) {return ab; }//main.cpp extern int gdata…

Java基础---复习01

main方法 一个程序有且只有一个main方法&#xff0c;main方法是java程序的唯一入口。 修饰符 修饰类修饰方法修饰域public都可以访问都可以访问private私有类只能本类只能本类protected子类可以继承、访问&#xff0c;同包下的类也可以访问子类可以继承、访问&#xff0c;同…

[AI 大模型] Google Gemini

文章目录 [AI 大模型] Gemini简介模型架构发展新技术和优势示例 [AI 大模型] Gemini 简介 Google Gemini 是 Google 最新推出的多模态 AI 大模型&#xff0c;旨在提升 AI 在各个领域的应用能力。Gemini 能够处理文本、图像、音频、视频和代码等多种数据类型&#xff0c;展现出…

暑期备考2024小学生古诗文大会:吃透真题和知识点(持续)

2024年上海市小学生古诗文大会的自由报名初赛将于10月19日&#xff08;星期六&#xff09;正式开始&#xff0c;还有3个多月的时间。 为帮助孩子们备考&#xff0c;我持续分享往年上海小学生古诗文大会真题&#xff0c;这些题目来自我去重、合并后的1700在线题库&#xff0c;每…

云计算渲染时代:选择Blender或KeyShot进行高效渲染

在云渲染技术日益成熟的背景下&#xff0c;挑选一款贴合项目需求的3D渲染软件显得尤为关键。当前&#xff0c;Blender与KeyShot作为业界领先的全能渲染解决方案&#xff0c;广受推崇。它们虽皆能创造出令人信服的逼真视觉效果&#xff0c;但在特色功能上各有所长。本篇文章旨在…

稀疏建模介绍,详解机器学习知识

目录 一、什么是机器学习&#xff1f;二、稀疏建模介绍三、Lasso回归简介四、Lasso超参数调整与模型选择 一、什么是机器学习&#xff1f; 机器学习是一种人工智能技术&#xff0c;它使计算机系统能够从数据中学习并做出预测或决策&#xff0c;而无需明确编程。它涉及到使用算…

华为HCIP Datacom H12-821 卷30

1.单选题 以下关于OSPF协议报文说法错误的是? A、OSPF报文采用UDP报文封装并且端口号是89 B、OSPF所有报文的头部格式相同 C、OSPF协议使用五种报文完成路由信息的传递 D、OSPF所有报文头部都携带了Router-ID字段 正确答案&#xff1a;A 解析&#xff1a; OSPF用IP报…

游戏AI的创造思路-技术基础-决策树(1)

决策树&#xff0c;是每个游戏人必须要掌握的游戏AI构建技术&#xff0c;难度小&#xff0c;速度快&#xff0c;结果直观&#xff0c;本篇将对决策树进行小小解读~~~~ 目录 1. 定义 2. 发展历史 3. 决策树的算法公式和函数 3.1. 信息增益&#xff08;Information Gain&…

无线网卡怎么连接台式电脑?让上网更便捷!

随着无线网络的普及&#xff0c;越来越多的台式电脑用户希望通过无线网卡连接到互联网。无线网卡为台式电脑提供了无线连接的便利性&#xff0c;避免了有线网络的束缚。本文将详细介绍无线网卡怎么连接台式电脑的四种方法&#xff0c;包括使用USB无线网卡、内置无线网卡以及使用…

终于搞定了通过两路蓝牙接收数据

一直想做无线传感器&#xff0c;通过蓝牙来接收数据&#xff0c;无奈因为arduino接收串口数据的一些问题&#xff0c;一直搁到现在。因为学校里给学生开了选修课&#xff0c;所以手边有一些nano和mega可以使用&#xff0c;所以就做了用两个nano加上两个蓝牙模块来发射数据&…

群体优化算法---文化算法介绍,求解背包问题

介绍 文化算法&#xff08;Cultural Algorithm, CA&#xff09;是一种基于文化进化理论的优化算法&#xff0c;首次由Robert G. Reynolds在20世纪90年代提出。文化算法通过模拟人类社会中的文化进化过程&#xff0c;利用个体与群体的双重进化机制来解决优化问题。其基本思想是…

动态数据库设计

动态数据库设计是一种灵活的方法&#xff0c;用于构建能够适应不断变化的数据需求的数据库结构。它强调在不频繁修改数据库表结构的前提下&#xff0c;有效管理和存储多样化的数据。以下是实现动态数据库设计的一些关键技术点和策略&#xff1a; 实体-属性-值&#xff08;EAV&a…

Java的面向对象基础

叠甲&#xff1a;以下文章主要是依靠我的实际编码学习中总结出来的经验之谈&#xff0c;求逻辑自洽&#xff0c;不能百分百保证正确&#xff0c;有错误、未定义、不合适的内容请尽情指出&#xff01; 文章目录 1.面向过程和面向对象2.访问限定符3.类和对象基础3.1.类的定义3.2.…

【安全设备】下一代防火墙

一、什么是防火墙 防火墙是一个网络安全产品&#xff0c;它是由软件和硬件设备组合而成&#xff0c;在内网和外网之间、专用网与公共网之间的一种保护屏障。在计算机网络的内网和外网之间构建一道相对隔离的保护屏障&#xff0c;以达到保护资料的目的。它是一种隔离技术&#…

Qt 线程 QThread类详解

Qt 线程中QThread的使用 在进行桌面应用程序开发的时候&#xff0c; 假设应用程序在某些情况下需要处理比较复杂的逻辑&#xff0c; 如果只有一个线程去处理&#xff0c;就会导致窗口卡顿&#xff0c;无法处理用户的相关操作。这种情况下就需要使用多线程&#xff0c;其中一个…

【操作系统】进程管理——进程的同步与互斥(个人笔记)

学习日期&#xff1a;2024.7.8 内容摘要&#xff1a;进程同步/互斥的概念和意义&#xff0c;基于软/硬件的实现方法 进程同步与互斥的概念和意义 为什么要有进程同步机制&#xff1f; 回顾&#xff1a;在《进程管理》第一章中&#xff0c;我们学习了进程具有异步性的特征&am…

如何安全隐藏IP地址,防止网络攻击?

当您想在互联网上保持隐私或匿名时&#xff0c;您应该做的第一件事就是隐藏您的 IP 地址。您的 IP 地址很容易被追踪到您&#xff0c;并被用来了解您的位置。下面的文章将教您如何隐藏自己&#xff0c;不让任何试图跟踪您的活动的人发现。 什么是 IP 地址&#xff1f; 首先&am…

JavaWeb系列二十一: 数据交换和异步请求(JSON, Ajax)

文章目录 官方文档JSON介绍JSON快速入门JSON对象和字符串对象转换应用案例注意事项和细节 JSON在java中使用说明JSON在Java中应用场景应用实例1.3.3 Map对象和JSON字符串转换 2. Ajax介绍2.1 Ajax应用场景2.2 传统的web应用-数据通信方式2.3 Ajax-数据通信方式2.4 Ajax文档使用…