通过elementui的el-table实现table嵌套展示

在Element UI中，el-table 组件可以用于实现嵌套表格的效果。你可以通过在 el-table 中嵌套 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.nested" style="width: 100%">
          <el-table-column prop="item" label="项目" width="180">
          </el-table-column>
          <el-table-column prop="amount" label="金额" width="180">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          nested: [
            { item: '购物', amount: '100' },
            { item: '餐饮', amount: '80' }
          ]
        },
        // ... 可以添加更多的数据项
      ]
    };
  }
};
</script>

在这个例子中，外层的 el-table 用于展示每一天的信息，而嵌套的 el-table 用于展示每一项交易的信息。通过 scope.row.nested 来访问嵌套的数据数组，并渲染嵌套的表格。