vue3 +element plus 表格怎么暂时一行数据中其它数组数据?

Question

数据结构大概是这样

 const list = [
    {
        id: 1, name: "小组1", data: [
            {name: '小红', yuwen: 90, shuxue: 92, yingyu: 98},
            {name: '小蓝', yuwen: 89, shuxue: 92, yingyu: 95}
        ]
    },
    {
        id: 1, name: "小组2", data: [
            {name: '小明', yuwen: 90, shuxue: 92, yingyu: 98},
            {name: '小刚', yuwen: 89, shuxue: 92, yingyu: 95}
        ]
    },
    {
        id: 1, name: "小组3", data: [
            {name: '小强', yuwen: 90, shuxue: 92, yingyu: 98},
            {name: '小张', yuwen: 89, shuxue: 92, yingyu: 95}
        ]
    },
]

表格形式是上图这个，问下这个数据结构可以弄成上图这样吗？ 可以的话怎么弄？

Answer 1

解决办法就是把 map 一下，然后 flat， 这样就是六条数据

然后合并单元格

---

另一个方法就是用 slot，一个单元格渲染两个数据， v-for 循环呗。

这个方法需要自己补一下线，也可以用hr当线，然后把最后一个隐藏。但是有可能单元格会有 padding，弄起来比较复杂