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


Posted in Javascript onNovember 30, 2020

背景

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

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

html实现

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

<table>
 <thead>
 <tr>
 <th>姓名</th>
 <th>课程数</th>
 <th>课程名称</th>
 <th>成绩</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td rowspan="3">
 张三
 </td>
 <td rowspan="3">
 3
 </td>
 <td>语文</td>
 <td>100</td>
 </tr>
 <tr>
 <td>数学</td>
 <td>90</td>
 </tr>
 <tr>
 <td>英语</td>
 <td>80</td>
 </tr>
 </tbody>
</table>

数据结构

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

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

Vue实现

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

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

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

<html>

<head>
 <style>
 th {
 border: 1px solid black;
 width: 100px;
 }

 td {
 border: 1px solid black;
 }
 </style>
</head>

<body>
 <div id="app">
 <table>
 <thead>
 <th>姓名</th>
 <th>课程数</th>
 <th>课程名称</th>
 <th>成绩</th>
 </thead>
 <tbody>
 <template v-for="(item,index) in students">
  <tr v-for="(m,i) in item.courses">
  <!-- 第1列每个学生只需要展示1次 -->
  <td v-if="i==0" :rowspan="item.courses.length">
  {{item.name}}
  </td>
  <!-- 第2列每个学生只需要展示1次 -->
  <td v-if="i==0" :rowspan="item.courses.length">
  {{item.courses.length}}
  </td>
  <td>{{m.name}}</td>
  <td>{{m.score}}</td>
  </tr>
 </template>
 </tbody>
 </table>
 </div>
 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 <script>
 var vm = new Vue({
 el: "#app",
 data: {
 students: [
  {
  name: '张三',
  courses: [
  {
  name: '语文',
  score: '100'
  },
  {
  name: '数学',
  score: '90'
  },
  {
  name: '英语',
  score: '80'
  }
  ]
  },
  {
  name: '李四',
  courses: [
  {
  name: '语文',
  score: '100'
  },
  {
  name: '数学',
  score: '90'
  }
  ]
  }
 ]
 }
 });
 </script>
</body>

</html>

效果:

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

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

Javascript 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
Aug 28 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
Mar 13 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
Apr 21 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
vue2导航根据路由传值,而改变导航内容的实例
Nov 10 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
小程序分页实践之编写可复用分页组件
Jul 18 #Javascript
在vue项目中使用sass语法问题
Jul 18 #Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 #Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 #Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 #Javascript
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
You might like
用缓存实现静态页面的测试
2006/12/06 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
jQuery封装的屏幕居中提示信息代码
2016/06/08 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
python杀死一个线程的方法
2015/09/06 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
怎样声明一个匿名的内部类
2016/06/01 面试题
学生请假条格式
2014/04/11 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
开学随笔
2015/08/15 职场文书
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis