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 相关文章推荐
将json当数据库一样操作的javascript lib
Oct 28 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue项目实战总结篇
Feb 11 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
Vue 实现手动刷新组件的方法
Feb 19 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 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
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
2014/12/18 Javascript
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue引入js数字小键盘的实现代码
2018/05/14 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Nuxt的路由配置和参数传递方式
2020/11/06 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
Python使用urllib2模块实现断点续传下载的方法
2015/06/17 Python
12步教你理解Python装饰器
2016/02/25 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python 高效编程技巧分享
2020/09/10 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
酒店保安员岗位职责
2014/01/31 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
七年级作文之秋游
2019/10/21 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL