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

2022-09-21 13:42:55 +08:00
 superbai

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

第一行表头:校区

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

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

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

类似这样:

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

934 次点击
所在节点    程序员
11 条回复
yaphets666
2022-09-21 13:46:04 +08:00
一般没这么弄的,校区,年级,班级,这都是查询条件,表格的表头只有一行,学号,姓名,校区,年级,班级
Junn
2022-09-21 13:50:10 +08:00
table 嵌套吧
timedivision
2022-09-21 14:06:59 +08:00
一楼合理,你这样搞反而很乱,建议改设计
superbai
2022-09-21 14:53:34 +08:00
@yaphets666 #1
@timedivision #3 我举得这个例子可能不太恰当,真实的场景是分组之后的数据是可比的,需要把数据放在不同列同一行对比着看
lybcyd
2022-09-21 16:28:02 +08:00
你这个表有点像数据透视表,antd vue 自带的表格不是针对这种场景设计的,硬要拼成这种数据结构会很难受。建议先把数据分好组,lodash 的 groupby 或者自己写一个,直接手动渲染 table ,然后抄一下 antd 的表格样式套进去。
Sendya
2022-09-21 16:55:15 +08:00
@superbai #4 那就两个表格 在栅格行对齐
superbai
2022-09-21 17:24:24 +08:00
@Junn #2 看了下,table 嵌套应该不是解决这类问题的
superbai
2022-09-21 17:24:47 +08:00
@lybcyd #5 感谢思路,我试试
superbai
2022-09-21 17:25:55 +08:00
@Sendya #6 不好意思,请问栅格行对齐具体是指?
yaphets666
2022-09-21 17:46:20 +08:00
@superbai 如果必须要是这种表格,antdv 的表格恐怕很难胜任,5 楼说的自己开发一个组件是个不错的选择。
superbai
2022-09-21 18:30:02 +08:00
@yaphets666 #10 感谢回复,看来是没有现成的解法,我试试自己简单开发一个

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/881865

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX