前端 - el-tree组件取消勾选删值问题？

Question

    <el-tree      ref="treesRef"      style="max-width: 600px"      :data="dataTree"      node-key="id"      :props="defaultProps"      show-checkbox      expand-on-click-node      default-expand-all      :highlight-current="true"      @check-change="handleClick"    />  </div>

let checkID = ref<any[]>([]);let array = ref<any[]>([]);const handleClick = (node: any, isCheck: any) => {  if (isCheck) {    array.value = collectIds(node);    checkID.value = checkID.value.concat(array.value);  } else {    removeIds(node, checkID.value);  }  emit("nodeClicked", checkID);};///获取父子idinterface TreeNode {  id: string;  children?: TreeNode[];}function collectIds(node: TreeNode, ids: string[] = []): string[] {  ids.push(node.id);  if (node.children) {    for (const child of node.children) {      collectIds(child, ids);    }  }  return ids;}/// 删除父子idfunction removeIds(node: TreeNode, idToRemove: string[] = []): void {  // 如果当前节点有子节点，则递归遍历子节点  if (node.children) {    for (let i = 0; i < node.children.length; i++) {      removeIds(node.children[i], idToRemove);      // 如果子节点已经被删除，则从数组中移除      if (!node.children[i].id) {        node.children.splice(i, 1);        i--; // 减少索引以避免跳过下一个节点      }    }  } else {    idToRemove.forEach((item, i) => {      if (item == node.id) {        idToRemove.splice(i, 1);      }    });  }}

Answer 1

check-Change 会在你取消勾选的时候多次触发，你选了最子集勾选掉，导致他的父亲变成了半选状态，所以再次触发了check-Change事件，导致会多删你的元素。你可以换成check事件，当然与之相对应你的代码逻辑也需要调整。

参考el-tree

或者你可以在change的时候调取api，拿到当前选中的节点。
allSelect = this.$refs.tree.getCheckedNodes()
halfSelect = this.$refs.tree.getHalfCheckedNodes()
allSelect.unshift.apply(allSelect, halfSelect)