Element嵌套表格复选框无法选中的问题

近日遇到一个需求，需要使用 element ui 的 el-table 组件展示带层级关系的表格数据，并且支持层级数据的选中。过程中遇到了一些全选时，子表格复选框无法选中的问题，记录分析一下。

由于项目使用的是老版本的 element(2.4.11)， 所以嵌套表格是通过展开行的插槽实现。

问题描述

对父级表格进行全选时，期望通过遍历每行嵌套的子表格（通过动态绑定的 ref）进行全选。

思路是没问题的，但是发现只有最后一个子表格的复选框被选中。

解决方案

遍历每个子表格 ref 时，通过设置不同时长的定时器，可以解决该问题。

关键代码

el-table 的关键实现

<!-- 父表格 -->
<el-table :data="tableData" @select-all="handleSelectAll">
  <el-table-column type="selection" width="55" />
  <!-- 子表格 -->
  <el-table-column type="expand">
    <template slot-scope="{ row }">
      <el-table :data="row.children" :ref="`sub${row.id}`">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="name" />
        <el-table-column prop="age" label="age" />
      </el-table>
    </template>
  </el-table-column>

  <el-table-column prop="name" label="name" />
  <el-table-column prop="age" label="age" />
</el-table>

data() {
  return {
    tableData: [
      {
        id: 1,
        name: 'John',
        age: 30,
        children: [
          { id: 2, name: 'Jim', age: 10 },
          { id: 3, name: 'Jane', age: 9 },
        ],
      },
      {
        id: 4,
        name: 'Tom',
        age: 40,
        children: [
          { id: 5, name: 'Tony', age: 15 },
          { id: 6, name: 'Tina', age: 13 },
        ],
      },
    ],
  };
},
methods: {
  handleSelectAll(selection) {
    // 处理全选逻辑
    selection.forEach((row, index) => {
      // 遍历每个子表格 ref
      const subTable = this.$refs[`sub${row.id}`];
      // 设置不同时长的定时器
      setTimeout(() => {
        subTable.toggleAllSelection();
      }, index * 20);
      // 其中 index * 20 是重点，如果时长一致，会导致只选中最后一个子表格的复选框
    });
  },
},