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 keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
JS跨域代码片段
Aug 30 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
JS中常用的消息框总结
Feb 24 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
小程序分页实践之编写可复用分页组件
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
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
PHP中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
微信JS接口大全
2016/08/25 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
Python 字符串定义
2009/09/25 Python
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
使用python加密自己的密码
2015/08/04 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python英语单词测试小程序代码实例
2019/09/09 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
如何基于python实现归一化处理
2020/01/20 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
初中三年学生的学习自我评价
2013/11/13 职场文书
项目投资意向书
2014/04/01 职场文书
师德师风的心得体会
2014/09/02 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL