从品牌网站建设到网络营销策划,从策略到执行的一站式服务
背景
创新互联客户idc服务中心,提供眉山服务器托管、成都服务器、成都主机托管、成都双线服务器等业务的一站式服务。通过各地的服务中心,我们向成都用户提供优质廉价的产品以及开放、透明、稳定、高性价比的服务,资深网络工程师在机房提供7*24小时标准级技术保障。
现实中会遇到很多需求,合并列,例如要显示一个名学生的各门课程成绩。
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条后,代码实现也就简单了:
姓名 课程数 课程名称 成绩 {{item.name}} {{item.courses.length}} {{m.name}} {{m.score}}
效果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图