vue.js实现表格合并示例代码


Posted in Javascript onNovember 30, 2016

前言

由于使用的是vue,想到MVVM是要用数据驱动的思想,所以考虑在Model做手脚,而不是渲染出数据来后做DOM操作,当然基本的CSS还是要有的。因此这个方法对所有数据驱动的框架都有效,比如说Angular和React。

最后的实现效果是这样的:

vue.js实现表格合并示例代码

实现思路

原本的正常表格的代码长这样:

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="15%">{{item.bsO_Name}}</td>
 <td width="8%" :class="{'overtime': overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%">{{item.F1}}</td>
 <td width="5%">{{item.F2}}</td>
 <td width="5%">{{item.F4}}</td>
 <td width="5%">{{item.F3}}</td>
 <td width="5%">{{item.F5}}</td>
 <td width="5%">{{item.F6}}</td>
 <td width="5%">{{item.F7}}</td>
 <td width="5%">{{item.F8}}</td>
 <td width="5%">{{item.F9}}</td>
 <td width="5%">{{item.F10}}</td>
</tr>

先拿正常的表格来做测试,原生的<td>标签就有rowspan属性支持单元格行合并,属性值指的是向下合并多少行,其实就相当于在本行中向下又添加了几个单元格。

因为,如果接下来的一行还会渲染的话就会被挤下去,因此,下面被合并的单元格要隐藏掉,通过display: none; css控制即可。

因此,每个<td>标签需要带有两个属性值,rowspandisplay来控制每一个单元格的合并行数和是否显示。

代码变成这样了

<tr v-for="item in items">
 <td width="3%">{{ $index + 1 }}</td>
 <td width="10%" :rowspan="item.bsO_Namespan" :class="{hidden: item.bsO_Namedis}">{{item.bsO_Name}}</td>
 <td width="8%" :rowspan="item.GathDtspan" :class="{hidden: item.GathDtdis}" :class="{overtime: overtime(item.GathDt)}">{{item.GathDt | time}}</td>
 <td width="5%" :rowspan="item.F1span"  :class="{hidden: item.F1dis}">{{item.F1}}</td>
 <td width="5%" :rowspan="item.F2span"  :class="{hidden: item.F2dis}">{{item.F2}}</td>
 <td width="5%" :rowspan="item.F3span"  :class="{hidden: item.F3dis}">{{item.F3}}</td>
 <td width="5%" :rowspan="item.F4span"  :class="{hidden: item.F4dis}">{{item.F4}}</td>
 <td width="5%" :rowspan="item.F5span"  :class="{hidden: item.F5dis}">{{item.F5}}</td>
 <td width="10%" :rowspan="item.F6span"  :class="{hidden: item.F6dis}">{{item.F6}}</td>
 <td width="8%" :rowspan="item.F7span"  :class="{hidden: item.F7dis}" :class="{overtime: overtime(item.F7)}">{{item.F7 | time}}</td>
 <td width="5%" :rowspan="item.F8span"  :class="{hidden: item.F8dis}">{{item.F8}}</td>
 <td width="5%" :rowspan="item.F9span"  :class="{hidden: item.F9dis}">{{item.F9}}</td>
 <td width="5%" :rowspan="item.F10span"  :class="{hidden: item.F10dis}">{{item.F10}}</td>
 <td width="5%" :rowspan="item.F11span"  :class="{hidden: item.F11dis}">{{item.F11}}</td>
</tr>

其中,这两个属性有一些特征:

要显示的单元格rowspan为>1的值,记录接下来的行数

要显示的单元格displaytrue

接下来不显示的单元格rowspan为1且displayfalse

只有一行数据的单元格rowspan为1且displaytrue

实际上就是设计一个算法,对于输入的表格数组,每个数据项添加两个属性,rowspandisplay,并且计算出rowspan的值为

本列中以下相同值的行数,以及依据rowspan的值计算display的值是否显示,最后将此改变后的数组输出。

解决示例代码

function combineCell(list) {
 for (field in list[0]) {
  var k = 0;
  while (k < list.length) {
   list[k][field + 'span'] = 1;
   list[k][field + 'dis'] = false;
   for (var i = k + 1; i <= list.length - 1; i++) {
    if (list[k][field] == list[i][field] && list[k][field] != '') {
     list[k][field + 'span']++;
     list[k][field + 'dis'] = false;
     list[i][field + 'span'] = 1;
     list[i][field + 'dis'] = true;
    } else {
     break;
    }
   }
   k = i;
  }
 }
 return list;
}

总结

代码实际上很短很简单,主要借助的是kmp的思想,定义一个指针k,开始指向第一个值,然后向下比较,以此对rowspandisplay设置,

若遇到不相同的值则判断为跳出,进行下一个循环,通知指针k加上这个过程中运算的行数,进行跳转,然后比较下一个单元格的值,和kmp的指针跳转判断相同字符串一样的原理。

通过combineCell()这个函数就可以将网络请求回来的数据进行过滤,附加上相应的值后再对vue监视的数组进行赋值操作就可以了。

实际上此方法不仅适用于vue,数据驱动的框架都可以,包括Angular和React,要想实现表格合并,对请求回来的值过滤一下就OK。

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
向大师们学习Javascript(视频与PPT)
Dec 27 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
Jun 06 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
Vue动态面包屑功能的实现方法
Jul 01 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 #Javascript
Javascript 闭包详解及实例代码
Nov 30 #Javascript
jQuery特殊符号转义的实现
Nov 30 #Javascript
Javascript 引擎工作机制详解
Nov 30 #Javascript
将JSON字符串转换成Map对象的方法
Nov 30 #Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 #Javascript
JS实现重新加载当前页面
Nov 29 #Javascript
You might like
php之CodeIgniter学习笔记
2013/06/17 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
php实现购物车功能(上)
2020/07/23 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
javascript 通用loading动画效果实例代码
2014/01/14 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
2018/12/13 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python中方法链的使用方法
2016/02/23 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python 利用邮件系统完成远程控制电脑的实现(关机、重启等)
2019/11/19 Python
pygame实现弹球游戏
2020/04/14 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Python的logging模块基本用法
2020/12/24 Python
家长会邀请书
2014/01/25 职场文书
大学生创业策划书
2014/02/02 职场文书
品德评语大全
2014/05/05 职场文书
2014年部门工作总结
2014/11/12 职场文书
红白喜事主持词
2015/07/06 职场文书
python在package下继续嵌套一个package
2022/04/14 Python