栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

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

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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条后,代码实现也就简单了:




  



  
姓名 课程数 课程名称 成绩

效果:

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号