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

通过以上的官网的解释我们可以发现二者的不同。 

简单来说，就是当你触发了子节点的复选框，如果复选框为全选的状态，因为你的一次触发，导致变为半选的状态，导致会在触发一次父节点的复选框check-change。

反之，假如树节点的复选框是没有选择的状态，由于选择了子节点后，变成了半选的状态，又会触发一次check-change

再者，就是直接选择复选框的话，复选框假如是全选的状态的话，点击树节点的父节点的话，会改变子节点所有的选择，则会触发节点数数量+1（父节点）的check-change次数

总结： Element Plus 的 <el-tree> 组件在处理勾选状态时，会因为级联的勾选逻辑导致 check-change 事件多次触发。直接操作父节点的复选框会影响其所有子节点的勾选状态，从而触发每个子节点的 check-change 事件；而勾选或取消勾选子节点也可能会改变父节点的勾选状态，导致父节点的 check-change 事件被触发。

解决办法：

1.继续使用check-change方法，但是需要配置check-strictly为true。这样就不会影响其他节点，解决级联关系

 2.替换为check方法

通过一些其他方法获取你需要的参数，比如你想要知道你选中的复选框是不是勾选的状态

const handleCheck = (data,node)=>{
console.log("点击复选框传的数据node为",node)
const isChecked = node.checkedKeys.includes(data.id);}

 或者你可以通过一些方法来获取树节点上的所有勾选的节点等操作，在进行一定的过滤。

<el-tree
    :key="forceUpdateKey"
    ref="treeRef"
    :data="dataSource"
    show-checkbox
    node-key="id"
    default-expand-all
    :expand-on-click-node="false"
    :default-checked-keys="displayPicture"
    :highlight-current="true"
    :props="{ label: 'mediaName', children: 'child' ,class: customNodeClass}"
    @node-click="handleNodeClick"
    @check="handleCheck"
>

treeRef.value.getCheckedNodes() 

一定在el-tree上设置ref，才可以使用这些方法