row中存在数据类型为数组的字段：ElemetUI的嵌套table

一、Solution

server返回数据格式如下，FE侧对列表进行渲染，trace字段为数组类型，且trace字段下对象个数不固定

使用Element的table实现，原型效果如下

field_a	field_b	field_c
		a	b	c
xxx	xxxx	1	1	1
2	2	2
xx	xxx	xx	xx	xx

trace字段是一个数组，数组中可能包含多个对象

二、Task

使用element的table实现嵌套表格的效果

三、Action

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column label="年龄">
      <template slot-scope="scope">
        <el-table :data="scope.row.age" style="width: 100%">
          <el-table-column prop="age" label="年龄"></el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: [
            { age: 18 },
            { age: 20 },
            { age: 22 },
          ],
          address: '北京市海淀区',
        },
        {
          name: '李四',
          age: [
            { age: 19 },
            { age: 21 },
            { age: 23 },
          ],
          address: '北京市朝阳区',
        },
      ],
    };
  },
};
</script>

我们使用 Element UI 的 el-table 和 el-table-column 组件创建表格

在其中一个列，我们使用 slot-scope 访问父级表格行数据，用 el-table 和 el-table-column 创建嵌套的子表格，将每个年龄数据展示为一个子表格的一行。

在 el-table 中，我们通过 prop 绑定数据中的字段

四、Result

这样就得到我们需要的效果了，嵌套表格内会根据我们的对象数组中对象的个数渲染对应的行数据 🎉