elementUI，el-table嵌套el-table，勾选联动效果

效果：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" @select="handleParentSelect" @select-all="handleParentSelectAll"
      @selection-change="handleParentSelectionChange" ref="parentTable" @row-click="handleParentRowClick"
      @expand-change="handleParentExpandChange">
      <el-table-column type="selection" width="55">
        <template slot-scope="{ row }">
          <el-checkbox :indeterminate="row.indeterminate" @change="toggleParentSelection(row, $event)"
            v-model="row.checked"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-table :data="scope.row.childTableData" :ref="'childTable' + scope.row.id"
            @select="handleChildSelect($event, scope.row)" @select-all="handleChildSelectAll($event, scope.row)"
            @selection-change="handleChildSelectionChange($event, scope.row)"
            @row-click="handleChildRowClick($event, scope.row)"
            @expand-change="handleChildExpandChange($event, scope.row)">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="name" label="项目"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          childTableData: [
            { name: '项目A' },
            { name: '项目B' }
          ],
          checked: false,
          indeterminate: false
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          childTableData: [
            { name: '项目C' },
          ],
          checked: false,
          indeterminate: false
        }
      ],
      selectedData: [],
    };
  },
  methods: {
    // 父表全选
    handleParentSelectAll(selection) {
      console.log('selection', selection);
      for (const item of this.tableData) {
        item.checked = selection.length == 0 ? false : true;
        // 改变子表的勾选状态
        this.$nextTick(() => {
          let childTableRef = this.$refs['childTable' + item.id];
          // 子表是否存在
          if (childTableRef) {
            // 切换子表勾选状态
            childTableRef.toggleAllSelection();
          }
        });
      }
    },
    // 父表勾选
    handleParentSelect(selection, row) {
      console.log(selection, row);
      this.$nextTick(() => {
        let childTableRef = this.$refs['childTable' + row.id];
        console.log('childTableRef', childTableRef);
        // 子表是否存在
        if (childTableRef) {
          // 切换子表勾选状态
          childTableRef.toggleAllSelection();
        }
      });
    },
    // 父表checkbox勾选
    toggleParentSelection(row, value) {
      console.log('row, index', row, value);
      if (value) {
        this.$refs.parentTable.toggleRowSelection(row, true);
      } else {
        this.$refs.parentTable.toggleRowSelection(row, false);
      }
    },
    // 父表点击当前行
    handleParentRowClick(row) {
      this.$nextTick(() => {
        let childTableRef = this.$refs['childTable' + row.id];
        if (childTableRef) {
          childTableRef.toggleAllSelection();
        }
      });
    },
    // 父表勾选变化
    handleParentSelectionChange(selection) {
      this.selectedData = JSON.parse(JSON.stringify(selection));
    },
    // 父表展开变化
    handleParentExpandChange(row, expanded) {
      console.log('handleParentExpandChange', row, expanded);
      if (expanded) {
        let findIndex = this.selectedData.findIndex(item => item.id === row.id);
        if (findIndex > -1) {
          this.$nextTick(() => {
            let childTableRef = this.$refs['childTable' + row.id];
            if (childTableRef) {
              childTableRef.toggleAllSelection();
            }
          });
        }
      }
    },

    // 子表全选
    handleChildSelectAll(selection, scopeRow) {

    },
    // 子表勾选
    handleChildSelect(selection) {

    },
    // 子表点击当前行
    handleChildRowClick(row, scopeRow) {
      console.log('row');
      row.expanded = !row.expanded;
      this.$refs['childTable' + scopeRow.id].toggleRowSelection(row, row.expanded);
    },
    // 子表勾选变化
    handleChildSelectionChange(selection, scopeRow) {
      console.log('selection 勾选', selection, scopeRow.childTableData.length);
      // 将对应的childTableData勾选数据替换
      let findIndex = this.selectedData.findIndex(item => item.id === scopeRow.id);
      // 如果勾选为空，则取消父表勾选
      if (selection.length === 0) {
        this.$refs.parentTable.toggleRowSelection(scopeRow, false);
        scopeRow.checked = false;
        scopeRow.indeterminate = false;
      } else if (selection.length === scopeRow.childTableData.length) {
        // 如果全选，则勾选父表
        this.$refs.parentTable.toggleRowSelection(scopeRow, true);
        scopeRow.checked = true;
        scopeRow.indeterminate = false;
        if (findIndex > -1) {
          this.selectedData[findIndex].childTableData = JSON.parse(JSON.stringify(selection));
        }
      } else {
        // 如果半选，将父表状态改为不确定indeterminate
        scopeRow.checked = true;
        scopeRow.indeterminate = true;
        console.log('---selection', selection);
        // 将对应的childTableData勾选数据替换
        if (findIndex > -1) {
          this.selectedData[findIndex].childTableData = JSON.parse(JSON.stringify(selection));
        } else {
          this.selectedData.push({
            ...scopeRow,
            childTableData: JSON.parse(JSON.stringify(selection))
          })
        }
      }
    },
  }
};
</script>