el-table 嵌套el-table

如何实现？

要实现 el-table 嵌套el-table，可以使用 el-table 组件的嵌套属性。具体实现步骤如下：

1.在外层 el-table 中的列定义中，定义一个列，并设置 type 为 expand。

2.在这个列中，使用 el-table 组件，并定义 columns。

3.在第一步中定义的列中，使用 slot-scope 属性获取当前行的数据，在 el-table 组件中使用此数据作为 prop 传递给子 el-table，并在子 el-table 中使用 slot-scope 属性获取子表格的数据进行渲染。

示例代码如下：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
    <el-table-column label="Inner Table" type="expand">
      <template slot-scope="props">
        <el-table :data="props.row.innerTable" style="width: 100%">
          <el-table-column prop="date" label="Date"></el-table-column>
          <el-table-column prop="name" label="Name"></el-table-column>
          <el-table-column prop="address" label="Address"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>

其中，tableData 为父表格数据，innerTable 为子表格数据。在父表格中，通过 type="expand" 定义一个可展开的列，将 el-table 组件插入到该列中。通过 slot-scope 获取当前行的数据，将 innerTable 数据作为 prop 传递给子 el-table。在子 el-table 中，同样通过 slot-scope 获取子表格的数据。