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 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
html dom节点操作(获取/修改/添加或删除)
Jan 23 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
JavaScript如何优化逻辑判断代码详解
Jun 08 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
星际争霸, 教主第一视角, ZvT经典龙蛇演义
2020/03/02 星际争霸
php单例模式示例分享
2015/02/12 PHP
PHP如何根据文件头检测文件类型实例代码
2018/10/14 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
详解JS深拷贝与浅拷贝
2020/08/04 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[00:34]DOTA2上海特级锦标赛 Spirit战队宣传片
2016/03/04 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
浅谈Python中函数的参数传递
2016/06/21 Python
python实现rsa加密实例详解
2017/07/19 Python
Python冲顶大会 快来答题!
2018/01/17 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python 实现简单的FTP程序
2019/12/27 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python基础之列表常见操作经典实例详解
2020/02/26 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
英国顶级水晶珠宝零售商之一:Tresor Paris
2019/04/27 全球购物
高一地理教学反思
2014/01/18 职场文书
《三袋麦子》教学反思
2014/03/02 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
三严三实学习心得体会
2014/10/13 职场文书
校车司机安全责任书
2015/05/11 职场文书
离婚案件上诉状
2015/05/23 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers