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

最新推荐文章于 2024-06-20 16:16:09 发布
最新推荐文章于 2024-06-20 16:16:09 发布
阅读量743 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41929569/article/details/134370532
版权

如标题所示，在 Element UI 的 el-tree 组件中，默认情况下，子节点没有展开时是不会触发 @check-change 事件的。这是因为 @check-change 事件通常用于处理节点的选中状态变化，而未展开的子节点不会触发选中状态的变化。

查阅Element UI文档，提供一个属性render-after-expand，将他设置为false即可

墨守易
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-tree 父组件数据双向绑定更新、on-check、check-change
m0_37684037的博客
02-23 1395
<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事件多次触发[已解决]
热门推荐
bao
09-03 1万+
我要实现的效果是，当选中的节点状态改变的时候使用 getCheckedNodes() 来获取选中的节点 遇到的问题： 当我点击选择框选中状态改变的时候，如果有多级子节点，那就会触发多次（因为子节点的选中状态也被改变） 解决办法： 把 check-change 事件改为 check 事件，只有当点击修改状态的时候才会触发 ...
【elementui】el-tree开启show-checkbox，点击叶子节点触发勾选
最新发布
bbt953的博客
06-20 410
el-tree开启show-checkbox，点击叶子节点触发勾选
Element-plus el-tree 触发check-change多次事件
weixin_59015876的博客
01-11 1873
再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数。简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change。通过以上的官网的解释我们可以发现二者的不同。
element-plus el-tree setCheckedKeys触发check-change事件
hafhcfgjb的博客
11-13 1908
el-tree 显示复选框，父子不互相关联，点击父节点需要setCheckedKeys选中第一级子节点，会调用check-change事件，从而导致孙子节点也会被选中，不符合预期。
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
weixin_55034383的博客
08-13 5931
使用element el-tree组件的@check-change函数和setChecked函数出现的问题
el-tree checkbox
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
10-17 988
expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢。el-tree组件使用时执行顺序依次为@current-change、@node-expand、@node-click、@check-change时。经debugger实验，先执行current-change、
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
10-18
下面小编就为大家分享一篇解决Jstree 选中父节点时被禁用的子节点也会选中的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI中el-tree节点的操作的实现
10-15
在HTML部分，`el-tree`组件接收`data`属性，这是树形结构的数据源，`props`用于指定子节点和节点标签的属性名，`@node-click`监听节点点击事件，`show-checkbox`为节点添加复选框，`node-key`用于唯一标识每个节点，...
Element-ui el-tree新增和删除节点后如何刷新tree的实例
10-14
2. **刷新父节点状态**：删除节点后，需要更新其父节点的`loaded`属性为`false`，并调用`expand()`方法，以重新加载父节点的子节点数据。 ```javascript let nodeToRemove = this.$refs.tree.getNode(nodeId); // ...
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
element el-tree组件的动态加载、新增、更新节点的实现
10-15
主要介绍了element el-tree组件的动态加载、新增、更新节点的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
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 2215
把@check-change改成@check，具体为啥我也不清楚，但是确实是可以了
el-tree 复选框选中事件多次重复触发
weixin_44035519的博客
09-09 2553
elementui中el_tree 复选框多次重复触发的问题
Vue -- 如何通过 el-tree 构造一个双层树 & 如何控制树的父节点无法展开 & 点击事件
支棱起来
09-01 1438
待实现的需求： 1、树为两层，第一层为指标类型，第二层为指标值 2、点击树的第二层（即指标值），在相关指标值后面出现基准二字 <el-tree :data="measTreeData" :props="measTreeProps" node-key="id" style="margin-top:5px;" ref="measTree" @node-click="handleMetricsClick"> <span class="rootcause-
el-tree点击复选框传递自定义参数和默认节点参数
huakaiwuxing的博客
01-05 647
el-tree点击复选框传递自定义参数和默认节点参数
解决：循环使用tree-select、select组件，change事件触发多次
qq_52065282的博客
05-15 3100
在这种类似的模块中循环使用elementUI，或element-plus中的下拉选择组件，需求是第一个select选择器改变值的时候，请求接口获取下一个select选择器的数据列表，在请求接口的时候发现接口请求了两次，值改变一次，@change事件调用的两次。触发多次的原因可能是因为组件重新渲染，导致事件监听器被重复绑定。
el-tree中部分属性和方法使用，以及树状图初始状态增改查状态如何实现
attach_uzi的博客
08-23 1064
在后台管理系统中，经常会遇到树状结构图，比如员工职能设置，商城物品结构图等等。 <el-tree @check-change="getEditTree" // 节点状态发生变化时的回调 ，并且有三个参数 :data="treeData" // 后台返回的树状数据 show-checkbox node-key="id" // 树节点的唯一标识属性 ref="editTreeData"
el-tree-select 使用 @change
12-07
根据提供的引用内容，el-tree-select组件可以使用@change事件。当选择器的值发生变化时，@change事件将被触发。以下是一个使用@change事件的示例代码： ```html <el-tree-select v-model="value" :data="treeData" @change="handleChange"></el-tree-select> ``` ```javascript methods: { handleChange(val) { console.log(val); } } ``` 在上面的示例中，当选择器的值发生变化时，handleChange方法将被调用，并将新的值作为参数传递给该方法。在这个方法中，我们可以执行任何我们想要的操作，例如更新数据或向服务器发送请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值