el-table实现嵌套表格的展示

在Vue.js中，可以使用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" border>
          <el-table-column property="item" label="项目"></el-table-column>
          <el-table-column property="count" label="数量"></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: '商品A', count: 10 },
            { item: '商品B', count: 20 }
          ]
        },
        // ... 可以添加更多的数据项
      ]
    };
  }
};
</script>

在这个例子中，el-table组件被用来展示顶层表格，其中一列使用template插槽来嵌套另一个el-table组件，用于展示嵌套的数据。scope.row.nested是当前行数据中嵌套的表格数据数组，它会被嵌套的el-table遍历并展示。