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

news2024/9/23 23:27:36

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.coloradmin.cn/o/1906353.html

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

相关文章

基于Java+SpringMvc+Vue技术的智慧校园系统设计与实现

博主介绍&#xff1a;硕士研究生&#xff0c;专注于信息化技术领域开发与管理&#xff0c;会使用java、标准c/c等开发语言&#xff0c;以及毕业项目实战✌ 从事基于java BS架构、CS架构、c/c 编程工作近16年&#xff0c;拥有近12年的管理工作经验&#xff0c;拥有较丰富的技术架…

昇思25天学习打卡营第11天 | LLM原理和实践:基于MindSpore实现BERT对话情绪识别

1. 基于MindSpore实现BERT对话情绪识别 1.1 环境配置 # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mindspore的版本号 !pip uninstall mindspore -y !pip install -i https://pypi.mirrors.ustc.edu.cn/simple mindspore2.2…

geospy.AI 根据图片定位地理位置

文章目录 简介场景标志性建筑平凡的商店名标志性的物品标志性的地理位置标志性的街道难以分辨的古建筑不出名的山水 简介 GeoSpy.ai 作为一个地理空间情报平台&#xff0c;可以在以下场景中使用&#xff1a; 农业&#xff1a;监控农作物生长情况&#xff0c;预测产量&#xf…

课设:二手车交易管理系统(Java+MySQL)

简易数据库课程设计~分享 技术栈 本项目使用以下技术栈构建&#xff1a; Java: 作为主要编程语言&#xff0c;负责业务逻辑的实现。MySQL: 用于数据存储&#xff0c;管理用户、车辆和订单信息。JDBC: 用于Java与MySQL数据库之间的连接和操作。Swing GUI: 提供用户图形界面&am…

数据库课设---酒店管理系统(MySQL、VBNet)

目录 一. 知识技术 二. 需求分析 2.1 功能需求 2.2 数据需求 三. 数据流图与数据字典 3.1 数据流图 3.1.1 业务流图 3.1.2 数据流图 3.1.3 关系图 3.2 数据字典 四. 数据库设计 4.1 概念模型设计 4.2 逻辑模型设计 4.3 数据库实现 …

【LSB图像低位隐写】字符串隐写

按照自己的理解写了一个简单的字符串隐藏在图像中的python代码 前言 脱胎于内容安全的大作业~ 目前第一阶段&#xff0c;只完成了字符串隐藏在图像中 步过图像隐藏在图像应该异曲同工&#xff0c;之后实现~ 一、代码 图像的output路径和input路径写死了&#xff0c;这个需要…

【SpringBoot】IDEA查看spring bean的依赖关系

前因&#xff1a;研究springcloud config组件时&#xff0c;我发现config-server包下的EnvironmentController不在扫描的包路径下却可以响应客户端的请求&#xff0c;这引起了我的注意&#xff0c;我的问题是&#xff1a;EnvironmentController是怎么被添加进bean工厂的。本章就…

联系表单提交Contact Form自动发送邮件源码

联系表单Contact Form提交后自动发送邮件源码构建指南&#xff1f; 无论是商业网站、博客还是个人主页&#xff0c;几乎每个网站都会有一个联系表单&#xff0c;用于收集用户的反馈、询问或建议。AokSend将探讨联系表单在网站中的重要性&#xff0c;以及如何通过源码实现自动发…

新加坡工作和生活指北:工作篇

文章首发于公众号&#xff1a;Keegan小钢 一年多以前&#xff08;2022 年 8 月初&#xff09;&#xff0c;那时我过来新加坡才 4 个多月&#xff0c;就写了篇文章分享了当时在新加坡的生活和工作体验。文章得到的反响不错&#xff0c;但也反馈出了一些新的问题&#xff0c;比如…

【数据结构】栈的实现(含详细代码)

文章目录 1.栈1.1 栈的概念及结构1.2 栈的实现1.3 代码实现 1.栈 1.1 栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守先进后…

如何监控和优化 PostgreSQL 中的连接池使用?

文章目录 一、连接池的基本概念二、监控 PostgreSQL 连接池使用的重要性&#xff08;一&#xff09;性能优化&#xff08;二&#xff09;资源管理&#xff08;三&#xff09;故障排查 三、PostgreSQL 连接池监控指标&#xff08;一&#xff09;活跃连接数&#xff08;二&#x…

下一代 CSS 框架:Mojo CSS

前言 Tailwind CSS 推出即受到广大开发者的欢迎&#xff0c;当前 Github star 数已达 77.8k。它是一个功能类优先&#xff08;utility-first&#xff09;的 CSS 框架&#xff0c;它提供了一系列功能类&#xff0c;让开发者可以在 HTML 中通过组合这些功能类&#xff08;原子类…

阶段三:项目开发---大数据开发运行环境搭建:任务3:安装配置Hadoop集群

任务描述 知识点&#xff1a;安装配置Hadoop 重 点&#xff1a; 安装配置Hadoop 难 点&#xff1a;无 内 容&#xff1a; Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。充分利用集群的威…

Flink 提交作业的方式

参考&#xff1a; Flink运行方式及对比-腾讯云开发者社区-腾讯云

前端程序员如何转大模型?收藏这一篇就够了(非常详细)

最近各行各业都不容易啊&#xff0c;那个中金女员工跳楼事件频繁上热点&#xff0c;引起广泛的关注&#xff0c;本质上还是经济下行&#xff0c;我们互联网行业也是如此&#xff0c;特别是程序员&#xff0c;本来就有35岁危机&#xff0c;加上行业不景气&#xff0c;大厂都在裁…

C语言中的数组:掌握数据的有序集合【一维数组,二维数组,字符串数组,直方图打印,计算全排列,字符数组常用函数】

目录 C语言中的数组&#xff1a;掌握数据的有序集合【一维数组&#xff0c;二维数组&#xff0c;字符串数组】一维数组一维数组的创建数组的七种初始化完全初始化&#xff1a;部分初始化&#xff1a;字符数组的初始化&#xff1a;自动初始化为0&#xff1a;使用memset函数初始化…

C语言求10进制转2进制(除2取余法)

1.思路&#xff1a;除2取余法&#xff0c;也就是说用除以2取余来将10进制数转换为二进制 2.两种代码实现&#xff0c;这里用了两&#xff0c;一个递归一个非递归。 递归是一种编程技术&#xff0c;其中一个函数直接或间接地调用自己。递归通常用于解决那些可以被分解为更小的、…

QCC5181 歌词歌曲名多国语言显示替代QCC5125 CSR8675

QCC518X作为Qualcomm新一代蓝牙技术芯片&#xff0c;支持最新蓝牙协议V5.4&#xff0c;较QCC512X系列&#xff0c;它有更强大的DSP、CPU。除支持USB、I2S、SPDIF等接口外&#xff0c;还扩展了LE Audio功能&#xff0c;扩展支持AptX Lossless。以5181为例&#xff0c;我们还扩展…

Pandas 学习笔记(四)--CSV文件

CSV文件 CSV&#xff08;Comma-Separated Values&#xff0c;逗号分隔值&#xff0c;有时也称为字符分隔值&#xff0c;因为分隔字符也可以不是逗号&#xff09;&#xff0c;其文件以纯文本形式存储表格数据&#xff08;数字和文本&#xff09;。 读取与写入 读取csv文件 i…

智能充电(新能源电动车,电单车)云管理系统的定制解决方案

一 系统简介 智能充电&#xff08;新能源电动车&#xff0c;电单车&#xff09;云管理系统 是一套能够实现对充电站/桩的实时通讯、状态监控、故障检测、运营分析、数据统计、策略设置的智能化多任务管理系统。 二 平台概览 智能充电云管理系统 https://chongdianzhuang.itg…