el-table树父节点勾选子节点也全选

在Vue.js的Element UI库中，`el-table`组件提供了树形数据（tree structure）的支持，当用户想要实现树父节点勾选时子节点自动全选的功能，通常可以通过复写`default-checked-keys`属性和监听`@check-change`事件来实现。以下是一个简单的步骤说明：

1. 首先，在`data`中定义一个数组，表示你的树形数据结构，并包含`默认选中的父节点ID`：

data() {
  return {
    treeData: [
      // 树形数据结构，包括parentKey字段关联父子节点
    ],
    defaultCheckedKeys: , // 默认选中的父节点ID
  };
}

2. 在`<el-table>`标签内，设置`tree-props`以启用树状结构，以及`default-checked-keys`为默认选中的父节点键值：

<template>
  <el-table :data="treeData" :tree-props="{children: 'children', parent: 'parentKey'}">
    <!-- 其他表头和列配置 -->
  </el-table>
</template>

3. 当用户勾选或取消勾选某个父节点时，更新`default-checked-keys`来同步选择状态到所有子节点。这通常在`@check-change`事件处理程序中完成：

<template>
  <!-- ... -->
  <el-table-column type="selection" @check-change="handleCheckChange"></el-table-column>
  <!-- ... -->
</template>

<script>
methods: {
  handleCheckChange(row) {
    if (row.parentKey === this.defaultCheckedKeys) { // 如果是父节点
      this.$set(this.defaultCheckedKeys, 0, row.key); // 更新默认选中的父节点ID
      this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys); // 设置所有子节点的选中状态
    }
  },
}
</script>

这样，当你勾选父节点时，所有直接和间接的子节点都会被选中。