antd vue 如何将相同的展示多列 key 相同的数据？

[superbai]

比如：现在有一张学生信息表，存储了学生的学号、姓名、班级、年级、校区等信息。在表格中想这样展示：

第一行表头：校区

第二行表头：在校区下细分年级

第三行表头：在年级下细分班级

第四行表头：在班级下细分学号、姓名

类似这样：

数据是使用 MongoDB 存储的，每条记录都是存储了一个学生的校区、年级、班级、学号和姓名信息，取出来的时候 key 也是相同的。如何使用 antd vue 版本实现这个效果？

[yaphets666]

一般没这么弄的，校区，年级，班级，这都是查询条件，表格的表头只有一行，学号，姓名，校区，年级，班级

[Junn]

table 嵌套吧

[timedivision]

一楼合理，你这样搞反而很乱，建议改设计

[superbai]

@yaphets666 #1
@timedivision #3 我举得这个例子可能不太恰当，真实的场景是分组之后的数据是可比的，需要把数据放在不同列同一行对比着看

[lybcyd]

你这个表有点像数据透视表，antd vue 自带的表格不是针对这种场景设计的，硬要拼成这种数据结构会很难受。建议先把数据分好组，lodash 的 groupby 或者自己写一个，直接手动渲染 table ，然后抄一下 antd 的表格样式套进去。

[Sendya]

@superbai #4 那就两个表格 在栅格行对齐

[superbai]

@Junn #2 看了下，table 嵌套应该不是解决这类问题的

[superbai]

@lybcyd #5 感谢思路，我试试

[superbai]

@Sendya #6 不好意思，请问栅格行对齐具体是指？

[yaphets666]

@superbai 如果必须要是这种表格，antdv 的表格恐怕很难胜任，5 楼说的自己开发一个组件是个不错的选择。

[superbai]

@yaphets666 #10 感谢回复，看来是没有现成的解法，我试试自己简单开发一个