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 相关文章推荐
JS Timing
Apr 21 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 Javascript
Angular设置title信息解决SEO方面存在问题
Aug 19 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
详解Vue实战指南之依赖注入(provide/inject)
Nov 13 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
微信小程序之数据绑定原理解析
Aug 14 Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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数据采集的详解
2013/06/02 PHP
php分割合并两个字符串的函数实例
2015/06/19 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
phpStorm2020 注册码
2020/09/17 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
基于JQuery制作的产品广告效果
2010/12/08 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
Jquery实现的一种常用高亮效果示例代码
2014/01/28 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
javascript弹出页面回传值的方法
2015/01/28 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
详解javascript立即执行函数表达式IIFE
2017/02/13 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
2018/07/04 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
vue项目里面引用svg文件并给svg里面的元素赋值
2020/08/17 Javascript
使用webpack5从0到1搭建一个react项目的实现步骤
2020/12/16 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
浅谈Python中的私有变量
2018/02/28 Python
python默认参数调用方法解析
2020/02/09 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
澳大利亚在线批发商:Simply Wholesale
2021/02/24 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
高校师德师风自我剖析材料
2014/09/29 职场文书
党员民主评议自我评价
2014/10/20 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫
科学家研发出新型速效酶,可在 24 小时内降解塑料制品
2022/04/29 数码科技