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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
Mar 14 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
JS中的回调函数实例浅析
Mar 21 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 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通过字符串调用函数示例
2014/03/02 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JS实现字符串转日期并比较大小实例分析
2015/12/09 Javascript
Angular 常用指令实例总结整理
2016/12/13 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python中的heapq模块源码详析
2019/01/08 Python
python面试题Python2.x和Python3.x的区别
2019/05/28 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
Baracuta官方网站:Harrington夹克,G9,G4,G10等
2018/03/06 全球购物
linux面试相关问题
2012/08/11 面试题
新护士岗前培训制度
2014/02/02 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
扩大国家免疫规划实施方案
2014/03/21 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
年终工作总结范文
2019/06/20 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
十个Python自动化常用操作,即拿即用
2021/05/10 Python