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

在 Vue3 中，Element Plus 的 `el-table` 组件用于创建复杂的表格，包括树状结构。当启用多选功能时，如果想要实现父子节点的选择不联动，即选择父节点时不会自动选择其下的所有子节点，反之亦然，你需要自定义一些处理逻辑。

通常，Vue 的数据驱动特性会依赖于组件间的父子通信（props 和 emit）。你可以这样做：

1. **监听父子表单状态**：在父组件上维护一个全局状态来存储当前选中的节点，然后通过 prop 传递给子组件。

<template>
  <el-table :data="treeData" @selection-change="handleSelectionChange">
    <!-- ... -->
  </el-table>
</template>

<script>
export default {
  props: ['selectedNodes'],
  methods: {
    handleSelectionChange(nodes) {
      this.$emit('update:selectedNodes', nodes);
    }
  },
  //...
}
</script>

2. **子组件内处理**：在子组件的 `el-tree` 或者 `el-row` 中，当用户直接选择某个节点时，忽略来自父组件的选中状态更新。

<el-tree
  :props="treeProps"
  :check-strictly="true"
  node-key="id"
  :default-checked-keys="selectedNodes.map(node => node.id)"
  @node-click="handleNodeClick"
/>

3. **点击事件处理** (`handleNodeClick`) 需要在节点点击时单独判断是否应该同步到全局状态。

methods: {
  handleNodeClick(node) {
    if (this.parentShouldControl) {
      // 如果需要保持联动，则同步选中状态
      this.selectedNodes = [...this.selectedNodes, node];
    } else {
      // 否则只影响当前节点及其子节点
      node.checked = !node.checked;
    }
  }
},
data() {
  return {
    parentShouldControl: false, // 开关变量控制是否联动
  };
}