element-ui中table多选组件选择父级子级也一起选择

在Element UI的Table多选组件中，选择父级和子级一起选择可以通过自定义的方式实现。

首先，我们需要在数据源中增加一个字段用于标识是否选中，例如使用"checked"字段，默认为false表示未选中。

然后，我们需要编写一个方法，在用户选择父级时，将其下所有子级都设置为选中状态。同样，在用户取消选择父级时，将其下所有子级都设置为未选中状态。可以通过递归的方式实现这个功能。

最后，我们需要在Table组件的多选列中，将checkbox的选中状态与数据源中的"checked"字段进行绑定，以实现联动效果。

具体代码如下：

template：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="selection" :selectable="customSelectable"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

script：

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '父级1',
          children: [
            { name: '子级1', checked: false },
            { name: '子级2', checked: false },
          ],
          checked: false
        },
        {
          name: '父级2',
          children: [
            { name: '子级3', checked: false },
            { name: '子级4', checked: false },
          ],
          checked: false
        }
      ]
    };
  },
  methods: {
    customSelectable(row, index) {
      return row.checked;
    },
    handleSelectAll(selection) {
      selection.forEach(item => {
        if (item.children) {
          item.checked = true;
          this.setChildrenChecked(item.children, true);
        }
      });
    },
    handleSelectionChange(selection) {
      selection.forEach(item => {
        if (!item.children) {
          item.checked = selection.length > 0;
        }
      });
    },
    setChildrenChecked(children, checked) {
      children.forEach(child => {
        child.checked = checked;
        if (child.children) {
          this.setChildrenChecked(child.children, checked);
        }
      });
    }
  }
};
</script>

以上代码演示了如何实现在Element UI的Table多选组件中选择父级和子级一起选择的功能。当用户选择父级时，其下的所有子级都会被选中；当用户取消选择父级时，其下的所有子级都会被取消选中。