el-table自定义子级

在 Element UI 的 el-table 组件中，可以通过自定义子级来实现表格中的树形结构。具体实现步骤如下：

1. 给 el-table-column 组件添加 scoped-slot，用于渲染子级：

<el-table-column label="Name">
  <template slot-scope="scope">
    {{ scope.row.name }}
    <template v-if="scope.row.children">
      <el-table :data="scope.row.children">
        <el-table-column label="Name" prop="name">
          <template slot-scope="childScope">
            {{ childScope.row.name }}
          </template>
        </el-table-column>
      </el-table>
    </template>
  </template>
</el-table-column>

2. 在表格数据中添加 children 字段，用于存储子级数据：

data() {
  return {
    tableData: [
      {
        name: 'Parent 1',
        children: [
          {
            name: 'Child 1-1'
          },
          {
            name: 'Child 1-2'
          }
        ]
      },
      {
        name: 'Parent 2',
        children: [
          {
            name: 'Child 2-1'
          },
          {
            name: 'Child 2-2',
            children: [
              {
                name: 'Grandchild 2-2-1'
              }
            ]
          }
        ]
      }
    ]
  }
}

这样，当表格数据中的某一行存在 children 字段时，会在该行下方渲染一个子表格，其中的数据就是 children 数组中的数据。需要注意的是，子表格中也可以继续使用 el-table-column 组件的 scoped-slot 来自定义渲染。