el-tree check-change出现的问题以及解决方案

最新推荐文章于 2025-04-23 16:51:35 发布
最新推荐文章于 2025-04-23 16:51:35 发布
阅读量2.7k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014788505/article/details/121374945
本文探讨了check-change在数据更新时自动触发事件可能导致的数据异常问题，并提出了一种替代方案——使用check来解决这一问题。check接受两个参数（数据与选中状态），能够更有效地控制数据的更新逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

check-change会导致数据更新时自动触发事件 比如里面有条件语句就会导致数据异常

替代方案：

使用check，由两个参数（数据与选中）

zongfunday
关注
elment UI tree的使用及数据传参
代码青春
09-06 1196
<el-tree :data="setResuordata" show-checkbox default-expand-all node-key="resCode" :default-checked-keys="treeCheckedKeys" ref="tree" highlight-current :props="defaultProps" @check.
vue3 Element-Plus封装的el-tree-select的使用
宁波阿成的博客
03-25 4093
vue3 Element-Plus封装的el-tree-select的使用
el-tree 父组件数据双向绑定更新、on-check、check-change
m0_37684037的博客
02-23 1600
<template> <div> <div> <el-input placeholder="Search" size="small" v-model="filterText" clearable @keyup.enter.native="onSearch" @clear="onSearch" ></el-input&g...
Element-Plus的el-tree-select树形选择框联动ts版本
最新发布
weixin_50971607的博客
04-23 262
Element-Plus的el-tree-select树形选择框联动ts版本
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
weixin_55034383的博客
08-13 6764
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
Element-plus el-tree 触发check-change多次事件
weixin_59015876的博客
01-11 4270
再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因
m0_65607651的博客
07-08 2984
el-tree 获取当前勾选节点的选中状态以及选中值对象 触发check-change多次事件问题原因 隐藏第一层或最后一层节点的勾选框
element ui tree的@check-change方法
freecharges的博客
03-19 9585
element ui tree的@check-change方法 this.refs.treeGasRef.getCheckedNodes()这个意思是获取选中对应框的在值，点击选框后激活@check——change方法，传入this.refs.treeGasRef.getCheckedNodes() 这个意思是获取选中对应框的在值，点击选框后激活@check——change方法，传入this.re...
el-tree-selected-tree
11-15
在实现`el-tree-selected-tree`时，我们需要监听`el-tree`的`'check-change'`事件，这个事件在节点被选中或取消选中时触发，我们可以获取到当前选中状态和节点信息。通过维护一个`selectedNodes`数组，我们可以记录...
el-tree 父组件双向数据绑定更新 on-check、check-change
m0_37684037的博客
02-23 1822
<template> <div> <div> <el-input placeholder="Search" size="small" v-model="filterText" clearable @keyup.enter.native="onSearch" @clear="onSearch" ></el-input&g...
vue3的el-tree的default-checked-keys无法勾选的问题解决
范天缘的博客
09-05 1227
前言:有些树形控件是需要默认勾线的 但是请求后渲染不显示 刷新外部的key值也没有用。看了一下文档 我们使用自带的方法来解决。
【Vue入门实践1】可编辑el-tree样式功能修改：修改icon、可编辑input、修改下拉展开icon位置
2401_87288719的博客
09-25 1461
总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了编辑情况
elementui el-tree组件使用@check-change事件多次触发
weixin_42792507的博客
06-28 1万+
在一个项目中,有这样一个需求: 现在有一个table表格,一个el-tree树,下拉选择框, 表格中有一些默认数据, 当下拉选择类型后,可以勾选对应tree的子节点,勾选或取消勾选,动态展示在table表格中 遇到的问题: 使用@check-change时, 点击节点时,会多次触发, 勾选时,虽然会多次触发@check-change,但还是可以正常添加数据 然而, 在取消勾选时, 如果点击的是叶子节点, 因为多次触发@check-change, 执行数组删除操作时,就会把这个分类下所有的数据都删掉, 很明显
elementui 在el-tree中 check-change 会触发两次问题
joan_FontEnd的博客
03-21 2457
把@check-change改成@check，具体为啥我也不清楚，但是确实是可以了
el-tree 在父节点收缩状态下，点击复选框选中父节点，无法触发子节点check-change事件
weixin_41929569的博客
11-13 1339
查阅Element UI文档，提供一个属性render-after-expand，将他设置为false即可。事件通常用于处理节点的选中状态变化，而未展开的子节点不会触发选中状态的变化。组件中，默认情况下，子节点没有展开时是不会触发。如标题所示，在 Element UI 的。
修改element-ui中tree的checkbox（隐藏指定节点checkbox）
Kimser
09-02 6596
在使用element-ui中tree的checkbox时，有时需要根据节点的属性来决定是否在节点前显示checkbox选择框，因此需要对element-ui的源码进行修改。 1、将node_modules文件夹中 element-ui 文件夹的 packages 中的 tree 文件夹复制出来。 2、修改 tree-node.vue文件，在<el-checkbox></el-checkbox>标签中修改 v-if 的内容 3、使用自定义的tree组件 im...
element-ui el-tree check-change和check的坑(调用多次)
joan_FontEnd的博客
07-29 3304
el-tree 数据调用多次
element el-tree组件使用@check-change事件多次触发[已解决]
热门推荐
bao
09-03 1万+
我要实现的效果是，当选中的节点状态改变的时候使用 getCheckedNodes() 来获取选中的节点 遇到的问题： 当我点击选择框选中状态改变的时候，如果有多级子节点，那就会触发多次（因为子节点的选中状态也被改变） 解决办法： 把 check-change 事件改为 check 事件，只有当点击修改状态的时候才会触发 ...
Element-Plus 中 ElTree 默认选中视图不更新选中状态问题
weixin_44326492的博客
09-15 1245
el-tree 默认选中状态视图更新问题
el-tree的check-change事件
06-28
### 回答1： el-tree的check-change事件是当树节点的选中状态发生变化时触发的事件。可以通过监听该事件来获取选中节点的信息，例如选中的节点id、选中的节点数据等。在事件处理函数中可以根据需要进行相应的操作，例如更新选中节点的状态、更新父节点的状态等。 ### 回答2： el-tree是Element UI中常用的树形控件，check-change事件是其自定义事件之一。 当用户在el-tree上勾选或取消勾选某个节点时，check-change事件就会被触发。在这个事件中，我们可以接收到三个参数： node：当前勾选或取消勾选的节点对象； data：树形控件的完整数据结构； isChecked：当前节点是否被勾选。 基于这些参数，我们可以在check-change事件的回调函数中编写一些逻辑代码，来实现对用户勾选或取消勾选节点的响应。 例如，我们可以根据当前选中节点的父节点的勾选状态，来自动勾选或取消勾选其子节点。具体的代码可以参考下面的示例： ```javascript <template> <el-tree :data="treeData" @check-change="handleCheckChange"></el-tree> </template> <script> export default { data() { return { treeData: [{ label: '一级节点', children: [{ label: '二级节点' }] }], }; }, methods: { handleCheckChange(node, data, isChecked) { // 获取当前节点的父节点对象 const parent = node.parent; // 如果当前节点是叶子节点，则直接返回 if (!parent.children) { return; } // 如果父节点已经被勾选，则将当前节点的所有子节点全部勾选 // 否则将所有子节点全部取消勾选 const checked = parent.checked || false; parent.children.forEach((child) => { if (isChecked) { this.$set(child, 'checked', true); } else { this.$set(child, 'checked', false); } }); // 递归更新父节点的状态 if (parent.level > 0) { this.updateParent(parent, data); } }, updateParent(node, data) { // 计算父节点的选中状态 let all = true; let none = true; node.children.forEach((child) => { if (child.checked !== true || child.indeterminate) { all = false; } if (child.checked !== false || child.indeterminate) { none = false; } }); // 更新父节点的状态 if (all) { node.checked = true; node.indeterminate = false; } else if (none) { node.checked = false; node.indeterminate = false; } else { node.checked = false; node.indeterminate = true; } // 递归更新父节点的父节点 if (node.level > 0) { this.updateParent(node.parent, data); } }, }, }; ``` 这段示例代码演示了如何在用户勾选或取消勾选树形控件上的节点时，自动勾选或取消勾选其所有子节点，并同步更新父节点的勾选状态。通过这种方式，可以提高用户的操作效率，同时也可以让界面更加友好和易用。 ### 回答3： el-tree是Element UI中的一种可折叠、可拖拽的树形组件，check-change事件是在树形结构组件中选中或取消选中某个节点时所触发的事件。通过该事件可以实时获取到节点的选中状态。 el-tree组件中的所有节点都具有一个唯一的key属性，该属性可用于标识和获取某个节点。当用户在el-tree组件中选择节点时，check-change事件将会被触发。此时可以通过事件的参数获取到节点的key和选中状态。 check-change事件的事件参数是一个Object对象，该对象包含了以下属性： 1. checkedKeys：选中的节点的key所组成的数组。 2. checkedNodes：选中的节点所组成的数组。 3. checkedLeafKeys：选中的叶子节点的key所组成的数组。 4. checkedLeafNodes：选中的叶子节点所组成的数组。 5. halfCheckedKeys：半选中的节点的key所组成的数组。 6. halfCheckedNodes：半选中的节点所组成的数组。 通过检查事件的参数对象中的checkedKeys或checkedNodes属性，可以获取到用户选中的节点或节点集合。同样，也可以通过判断事件参数对象中的halfCheckedKeys或halfCheckedNodes属性，获取半选中的节点或节点集合。 总之，check-change事件是el-tree组件中一个非常重要的事件，通过该事件可以实现对树形结构组件的动态交互。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值