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 相关文章推荐
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
移动端jQuery修正Web页面滑动时div问题的两则实例
May 30 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
js实现截图保存图片功能的代码示例
2017/02/16 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
Python with语句和过程抽取思想
2019/12/23 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
python用什么编辑器进行项目开发
2020/06/17 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
教育系统干部作风整顿心得体会
2014/09/09 职场文书
办公室个人总结
2015/02/28 职场文书
React配置子路由的实现
2021/06/03 Javascript