ElementUI用el-table实现表格内嵌套表格

在ElementUI中，可以通过使用el-table组件的嵌套特性来实现表格内嵌套表格。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <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 label="详细信息">
      <template slot-scope="scope">
        <el-table :data="scope.row.details" border>
          <el-table-column prop="detailName" label="详情名称"></el-table-column>
          <el-table-column prop="detailValue" label="详情值"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          details: [
            { detailName: '详情1', detailValue: '值1' },
            { detailName: '详情2', detailValue: '值2' }
          ]
        },
        // ... 可以添加更多的数据项
      ]
    };
  }
};
</script>

在这个例子中，外层的el-table称为父表格，内层的el-table称为子表格。在父表格的el-table-column中使用slot-scope来访问子表格的数据，并渲染子表格。子表格的数据通过父表格当前行的scope.row属性访问。