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

check-change与check的区别

最新推荐文章于 2025-05-19 18:10:41 发布

原创最新推荐文章于 2025-05-19 18:10:41 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

本文探讨了check-change在数据更新时自动触发事件可能导致的数据异常问题，并提出了一种替代方案——使用check来解决这一问题。check接受两个参数（数据与选中状态），能够更有效地控制数据的更新逻辑。

部署运行你感兴趣的模型镜像

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

替代方案：

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

您可能感兴趣的与本文相关的镜像

Qwen3-8B

文本生成

Qwen3

Qwen3 是 Qwen 系列中的最新一代大型语言模型，提供了一整套密集型和专家混合（MoE）模型。基于广泛的训练，Qwen3 在推理、指令执行、代理能力和多语言支持方面取得了突破性进展

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zongfunday

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3 Element-Plus封装的el-tree-select的使用

宁波阿成的博客

03-25

4494

vue3 Element-Plus封装的el-tree-select的使用

Debug-003-el-tree中的一些属性&方法&坑

LM0916的博客

05-07

600

el-tree在项目中应用还比较多，涉及权限，建筑层级等等业务的问题可能都要用到，坑也比较多。今天把碰到的需要和使用过的一小部分内容分享一下。Vue2，3会有一点差异，但不大，具体问题具体分析吧。第一个其实就是业务数据，其实是这棵树（:data=“data”）中的某层级下的一个节点的数据（你点击的哪一个就是哪一个），data其实也是后端返回的嘛，调接口拿的，格式还是要符合el-tree的基本要求。其实有三个哈，第三个我参与的业务用的比较少吧。expanded（也有用，业务里碰到过，后期再补充）

2 条评论您还未登录，请先登录后发表或查看评论

el-tree lazy 使用 default-checked-keys 确定check 子项仅有连续n项为check时，根级会变为check，导致其子项全部变为check

海胆的博客

09-10

898

问题定位 el-tree 在使用 lazy 模式时，当提供的 default-checked-keys 数组开始仅包含从第一个子节点开始连续的（>= 2）check key 时，就会造成父级设置成 check , 最终导致所有子级都被选中 default-checked-keys 数组的值是通过懒加载获得的问题原因可能跟 el-tree 的底层渲染方式有关解决方法尝试在首部添加一个不可见的节点，且不说行不行，父级会出现半选百度的方案 checkStrictly太复杂了

element：el-tree控件获取当前选中节点（key）值

编写博客，学习交流

02-16

1万+

el-tree定义 <el-tree :data="data" node-key="levelId" :props="defaultProps" @check-change="handleCheckChange" @check="handleCheck" show-checkbox> </el-tree> check和check-change都可以用,那个方便用那个触发 check:当复选框被点击的时候触发 check-change:节点..

Vue3 + Element-plus Tree 组件的 @check 事件使用方案

TianXuab的博客

08-09

2845

请根据你的实际需求进行逻辑处理。这只是一个简单的示例，你可以根据实际情况来设计你的 Tree 组件和处理方法。在这个示例中，我们使用了 Vue 3 的 Composition API，通过。属性来设置节点的唯一标识（这里使用了一个函数返回节点的 id）。在 Vue 3 中使用 ElementUI 的 Tree 组件的。事件来处理节点选中状态的变化。以下是在 Vue 3 中如何使用。与 Vue 2 不同的是，Vue 3 使用。与 Vue 2 相似，我们在。函数来设置组件的逻辑。方法来处理选中状态的变化。

el-tree 父组件数据双向绑定更新、on-check、check-change

m0_37684037的博客

02-23

1653

<template> <div> <div> <el-input placeholder="Search" size="small" v-model="filterText" clearable @keyup.enter.native="onSearch" @clear="onSearch" ></el-input&g...

使用element el-tree组件的@check-change函数和setChecked函数出现的问题

weixin_55034383的博客

08-13

6899

使用element el-tree组件的@check-change函数和setChecked函数出现的问题

el-tree-selected-tree

11-15

在实现`el-tree-selected-tree`时，我们需要监听`el-tree`的`'check-change'`事件，这个事件在节点被选中或取消选中时触发，我们可以获取到当前选中状态和节点信息。通过维护一个`selectedNodes`数组，我们可以记录...

el-tree结合el-tree-transfer实现穿梭框里展示树形数据

最新发布

weixin_46011290的博客

05-19

1287

参考文章：我把他的弹框单拉出来一个独立文件作为组件方便使用，遇到一些问题记录一下。思路：（1）思路二：利用elementUI的filter API对选中节点进行筛选，左侧筛选出未选中的，右侧筛选出选中的，用的还是同一棵树，用一个属性来区分是否选择，好处是子节点选中，父节点会跟随保存，不用重新构建树结构。（2）通过监听treeData值变化，调用setTreeFilter也就是里的filter 方法，filter 是 el-tree 组件用于动态过滤树节点，配合 filter-node-method

vue3 + ts 使用 el-tree

Serenity_Qin的博客

12-03

687

【代码】vue3 + ts 使用 el-tree。

elementui el-tree组件使用@check-change事件多次触发

weixin_42792507的博客

06-28

1万+

在一个项目中,有这样一个需求: 现在有一个table表格,一个el-tree树,下拉选择框, 表格中有一些默认数据, 当下拉选择类型后,可以勾选对应tree的子节点,勾选或取消勾选,动态展示在table表格中遇到的问题: 使用@check-change时, 点击节点时,会多次触发, 勾选时,虽然会多次触发@check-change,但还是可以正常添加数据然而, 在取消勾选时, 如果点击的是叶子节点, 因为多次触发@check-change, 执行数组删除操作时,就会把这个分类下所有的数据都删掉, 很明显

el-tree checkbox

夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ

10-17

1100

expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢。el-tree组件使用时执行顺序依次为@current-change、@node-expand、@node-click、@check-change时。经debugger实验，先执行current-change、

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

m0_65607651的博客

07-08

3387

el-tree 获取当前勾选节点的选中状态以及选中值对象触发check-change多次事件问题原因隐藏第一层或最后一层节点的勾选框

Element-plus el-tree 触发check-change多次事件

weixin_59015876的博客

01-11

4622

再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。

el-tree勾选自动展开子节点并触发@check-change事件

kyh419的博客

08-15

1235

在el-tree里使用复选框的时候，当节点没有被展开时，点击复选框只会触发当前点击节点的@check-change事件，但是业务需求是需要点击节点时，能够展开所有子节点并且全部都触发@check-change事件。遇到的问题是，本来想在点击复选框的时候，获取到node, 通过node.expaned = true来实现节点展开，节点是展开了，但是不会再次去触发check-change事件了，达不到想要的效果。这样就可以保证既可以展开节点，也能触发选中事件！

el-tree 在父节点收缩状态下，点击复选框选中父节点，无法触发子节点check-change事件

weixin_41929569的博客

11-13

1497

查阅Element UI文档，提供一个属性render-after-expand，将他设置为false即可。事件通常用于处理节点的选中状态变化，而未展开的子节点不会触发选中状态的变化。组件中，默认情况下，子节点没有展开时是不会触发。如标题所示，在 Element UI 的。

element el-tree组件使用@check-change事件多次触发[已解决]

热门推荐

bao

09-03

1万+

我要实现的效果是，当选中的节点状态改变的时候使用 getCheckedNodes() 来获取选中的节点遇到的问题：当我点击选择框选中状态改变的时候，如果有多级子节点，那就会触发多次（因为子节点的选中状态也被改变）解决办法：把 check-change 事件改为 check 事件，只有当点击修改状态的时候才会触发 ...

element-ui el-tree check-change和check的坑(调用多次)

joan_FontEnd的博客

07-29

3457

el-tree 数据调用多次

el-tree check-strictly为false实现选择和取消选择一个节点时，子节点跟着选中和取消

Hay-Zero的博客

06-15

6954

先看具体实现效果核心：绑定check事件和设置check-strictly为true，当点击某个节点时判断是勾选还是取消勾选；找到子节点和已勾选的节点，如果是勾选用concat合并再用set去重，如果是取消勾选在已勾选的节点中去掉子节点，最后用setCheckedKeys或者setCheckedNodes设置 <el-tree :data="apiScopeGrantList" show-checkbox node-key="id" ref="treeApiScop

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组件中一个非常重要的事件，通过该事件可以实现对树形结构组件的动态交互。