vue3 element-plus el-table 树形表格多选情况下父子不联动怎么解决

在Vue3中，Element Plus库的`el-table`组件用于创建树状表格，当遇到多选功能并且需要避免父子节点联动时，可以通过以下步骤来解决：

1. **数据结构设计**：保持每个节点的数据结构清晰，包含一个`selected`属性来标识当前节点是否被选中，而不是通过引用父节点来判断。这样可以独立控制每个节点的选择状态。

2. **事件处理**：在`el-tree-node`组件上监听`node-click`或`node-check`事件，然后更新当前节点的`selected`值，而不是直接改变父级节点的状态。

3. **复选框绑定**：在模板中给每个子节点添加一个独立的复选框，将其`v-model`绑定到当前节点的`selected`属性上，这样点击子节点只会操作自身。

4. **取消父子联动**：如果你想在用户选择父节点时禁止子节点同步选中，可以在`node-click`事件处理器里检查当前节点是否是父节点，如果是，则阻止子节点的联动操作。

示例代码片段：

<template>
  <el-tree
    :data="treeData"
    node-key="id"
    @node-click="handleNodeClick"
    default-expand-all
  >
    <span slot-scope="{ node }">
      <input type="checkbox" v-model="node.selected" />
      {{ node.label }}
    </span>
  </el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // 初始化你的树状数据结构
      ],
    };
  },
  methods: {
    handleNodeClick(node) {
      if (node.parent) { // 如果不是根节点
        // 取消子节点的联动选择
        node.$children.forEach(child => child.selected = false);
      }
      node.selected = !node.selected; // 更新当前节点的选中状态
    },
  },
};
</script>