热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Vue实现数据表格合并列rowspan效果

这篇文章主要为大家详细介绍了Vue实现数据表格合并列rowspan效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

背景

现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。

html实现

使用html实现是比较简单的,利用table标签的rowspan属性即可,代码如下:

姓名 课程数 课程名称 成绩
张三 3 语文 100
数学 90
英语 80

数据结构

在实际工程中,表格数据一般来自后端,以json格式发送到前端后,学生和课程是一对多的关系,json格式数据结构如下:

[
 {
 name: '张三',
 courses: [
 {
 name: '语文',
 score: '100'
 },
 {
 name: '数学',
 score: '90'
 },
 {
 name: '英语',
 score: '80'
 }
 ]
 }
]

Vue实现

我们对比表格结构和json数据结构,分析出结论如下:

1.实际上每个课程对应表格的一行
2.如果是第一列第二列(学生姓名、学生课程数),则应设置其rowspan值为该学生拥有的课程数
3.如果是第一列第二列,则每个学生只需要输出1次该列,因为需要按学生合并列后展示。

分析完1-3条后,代码实现也就简单了:




 



 
姓名 课程数 课程名称 成绩

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
author-avatar
妃你莫属L_957
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有