Vue+ElementUI中表格嵌套的使用方法

在Vue和Element UI中，可以使用表格（<el-table>）组件来嵌套其他组件，如表格。以下是一个简单的例子，展示了如何在Vue和Element UI中创建嵌套表格：

<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.scores" style="width: 100%">
          <el-table-column prop="subject" label="科目" width="180">
          </el-table-column>
          <el-table-column prop="score" 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: '张三',
          scores: [
            { subject: '语文', score: 80 },
            { subject: '数学', score: 90 },
          ],
        },
        // ... 更多数据
      ],
    };
  },
};
</script>

在这个例子中，我们有一个外层的el-table，它包含了嵌套的el-table。嵌套的表格使用了<template slot-scope="scope">来访问父级行的数据，并根据这些数据渲染内层表格。这样就可以在Vue和Element UI中创建多层级的表格布局。