vue3 element-plus el-table树形表格选中所有子节点时选中父节点

在Vue3中使用Element Plus的el-table组件实现树形表格，并且希望在选中所有子节点时自动选中父节点，可以通过监听表格的选中状态变化，并结合树形数据的结构特点来实现。具体步骤如下：

1. 使用`v-model`绑定表格的选中行数据数组。
2. 通过计算属性或方法获取到所有的子节点。
3. 监听选中行数据的变化，当发现有子节点被选中时，遍历并检查其父节点是否已经在选中状态中，如果不是，则将其加入到选中数组中。

以下是一个简单的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    v-model="checkedRowKeys"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  setup() {
    const tableData = ref([...]); // 填充你的树形数据
    const checkedRowKeys = ref([]);

    // 递归获取所有子节点
    const getChildren = (data, childrenKey) => {
      return data.reduce((acc, item) => {
        const children = item[childrenKey];
        if (children && children.length > 0) {
          acc = [...acc, ...getChildren(children, childrenKey)];
        }
        acc.push(item);
        return acc;
      }, []);
    };

    // 监听选中状态变化
    const handleSelectionChange = (val) => {
      const childrenKeys = tableData.value.reduce((acc, item) => {
        const children = item.children;
        if (children && children.length > 0) {
          const childKeys = getChildren(children, 'children').map(child => child.id);
          acc = [...acc, ...childKeys];
        }
        return acc;
      }, []);

      // 移除不需要的父节点
      const filteredCheckedRowKeys = val.filter(key => !childrenKeys.includes(key));

      // 添加选中的子节点对应的父节点
      tableData.value.forEach((node) => {
        if (node.children && node.children.some(child => val.includes(child.id))) {
          filteredCheckedRowKeys.push(node.id);
        }
      });

      checkedRowKeys.value = filteredCheckedRowKeys;
    };

    return {
      tableData,
      checkedRowKeys,
      handleSelectionChange,
    };
  },
};
</script>

在上面的代码中，`tableData` 是包含树形数据的数组，`checkedRowKeys` 是用于绑定当前选中行的数组。`handleSelectionChange` 方法会在表格的选中状态变化时被调用，它会处理子节点选中时父节点的选中状态。