elementui 在el-tree中 check-change 会触发两次问题

官方文档解释如下： 经debugger实验，先执行current-change、node-expand（假如节点展开）、node-click，最后执行check-change，check-change是检查节点发生变化时调用，比节点自身变化要慢

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

在这种类似的模块中循环使用elementUI，或element-plus中的下拉选择组件，需求是第一个select选择器改变值的时候，请求接口获取下一个select选择器的数据列表，在请求接口的时候发现接口请求了两次，值改变一次，@change事件调用的两次。触发多次的原因可能是因为组件重新渲染，导致事件监听器被重复绑定。

el-tree 数据调用多次

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

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

但是这次触发的节点的ID 为 9 的，这次的9已经不再是勾选状态，所以无法进入if 判断，从而直接输出了 “当前节点 ID ：9”check-strictly是为了关闭父子之间相互关联，若不关闭，那么当我们勾选子组件的时候，父组件也会自动被勾选上去，从而变成了多选，这明显是不符合需求的。在开发中，我们经常会遇到 Tree 树形控件要求单选的这个需求，但是element ui 提供的Tree默认是多选的，要想实现单选，我们就要另外操作一波。它需要传递三个参数，我们只需要传递前面两个参数即可。

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

element checked要点击两次的问题 问题代码： //checked是我循环列表的一个参数，也可以在data里面声明 <el-checkbox v-model='checked' @change="checkChange(checked)"></el-checkbox> //判断是否选中 checkChange(checked){ checked =! checked }, @change完全没必要写，v-model已经改变了他，这里相当于改变了两

el-tree 自定义效果

el-tree全部禁用并横向显示

<el-checkbox v-model="item.isChecked" @change="handleChkChange(item)"></el-checkbox> 修改为 <el-checkbox :value="item.isChecked" @change="handleChkChange(item)"></el-checkbox> v-model和@change 改变了变量值两次

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

elementui中el_tree 复选框多次重复触发的问题

check-change会导致数据更新时自动触发事件 比如里面有条件语句就会导致数据异常 替代方案： 使用node-click与check一起使用，分别由两个参数（数据与选中）

用来关联需要回显的数据，这个关联的数据必须和。中数组的值必须为数字。

1：父子节点不关联check-strictly 2：实现单选 handleCheckChange <el-tree :props="defaultProps" ref="tree" :data="treeData" :check-strictly="true" show-checkbox node-key="id" default-expand-all highlight-current @check-change="handleCheckChange"> &