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多次事件

相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰8 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试