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

Element Plus 的 `el-table` 提供了一个树状数据展示的功能，当涉及到多选并且需要保持父子节点之间的联动，即如果选择了一个父节点，其下的所有子节点会被自动勾选，反之亦然，这通常通过组件内部的状态管理和事件处理机制实现。

在 Element Plus 中，`el-tree-select` 或 `el-checkbox-group` 结合 `el-table-column` 的 `props` 属性可以实现这个功能。首先，你需要设置表单字段为树形结构，并配置 `check-strictly` 参数为 `true` 来启用严格的父子级关联检查。然后，在 `el-table-column` 的 `type` 为 `selection` 或者 `index` 的列上添加事件监听器，如 `@change` 或 `@select`，在这些事件触发时更新整个树的数据状态。

示例代码：

<template>
  <el-table :data="treeData" :props="{ children: 'children', expandProp: 'expanded'}">
    <el-table-column type="index" label="ID"></el-table-column>
    <!-- 使用 tree-select 或 checkbox-group -->
    <el-table-column type="selection" @change="handleSelectChange"></el-table-column>
    <el-table-column prop="name" label="Name"></el-table-column>
    <!-- 其他列... -->
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      treeData: ... // 父子结构数据
    };
  },
  methods: {
    handleSelectChange(value) {
      if (value.length > 0) {
        this.treeData.forEach(item => item.isParentChecked = value.includes(item.id)); // 更新父子状态
      }
    }
  }
};
</script>