您的位置:首页 > 娱乐 > 明星 > el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因

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

2025/3/7 7:12:31 来源:https://blog.csdn.net/m0_65607651/article/details/140264609  浏览:    关键词: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多次事件

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com