vue通过数据过滤实现表格合并


Posted in Javascript onNovember 30, 2020

基于vue通过数据过滤实现表格合并,供大家参考,具体内容如下

需求

  • 基于vue渲染的数据表格
  • 需要对相同的列进行合并

思路

自从使用了vue,就再也不想直接操作dom节点了,所以还是对数据操作。

要合并单元格需要用到rowspan属性,所有想法是针对数据添加rowspan属性使其多行显示,但下面的行再去渲染就重复了,所以用hidden 隐藏掉。

所以,针对每一行数据 ,用rowspan和display来控制每一个单元格的合并行数和是否显示

代码

<table id="search_table" class="table table-bordered table-striped" cellspacing="0" width="100%">
 <thead>
 <tr class="table_bg">
 <th class="" colspan="12">征期日历信息</th>
 </tr>
 <tr class="cell_bg">
 <th class="" style="">月份</th>
 <th class="" style="" >征期</th>
 <th class="" style="" >缴款期</th>
 <th class="" style="" >税种</th>
 </tr>
 </thead>
 <tbody id="tbody">

 <tr class="" v-for="(i,index) in result">
 <td :rowspan="i.ydspan" :class="{hidden: i.yddis}" class="text-center">
 {{i.yd}}
 </td>
 <td :rowspan="i.zqspan" :class="{hidden: i.zqdis}">
 {{i.zq}}
 </td>
 <td <%--:rowspan="i.jkqspan" :class="{hidden: i.jkqdis}"--%>>
 {{i.jkq}}
 </td>
 <td>
 {{i.sz}}
 </td>
 </tr>
 </tbody>
</table>

这里,对需要合并的单元格添加 :rowspan=”i.ydspan” :class=”{hidden: i.yddis}”

接着,设计一个算法,对用于渲染table渲染的数组,每个数据项添加两个属性,rowspan和hidden,计算出rowspan的值为 本列中该 值相同的行数,(当然,数据在sql中是经过group by的)以及依据rowspan的值计算hidden的值是否显示true/false,最后将此改变后的数组输出。

然而 ,需求是复杂的。

 vue通过数据过滤实现表格合并

如图,要求第二列不能跨过第一列的维度合并,所以,没有办法一劳永逸,只能分别处理

先对月份处理,再对征期处理。

talk is cheap ,show you the code。

号称是算法,就俩for 循环

combineZQ:function (list) {
 var k = 0;
 let field ="zq";
 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]['yd']==list[i]['yd']&&list[k]['yd']!='') {
 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;
},

名字是拼音没毛病,我也不想,人家大公司的规范(-,-)

combineYd:function (list) {
 var k = 0;
 let field ="yd";
 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;
},

然后。

vue通过数据过滤实现表格合并

这样就搞定了。

效果图: 这里前两列进行了合并

vue通过数据过滤实现表格合并

就是这样,by 一位即将成为 前端 的 后台程序员

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js禁止页面使用右键(简单示例代码)
Nov 13 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 Javascript
es6函数中的作用域实例分析
Apr 18 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 #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
You might like
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
PHP 函数语法介绍一
2009/06/14 PHP
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
[38:32]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第二局
2016/02/26 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
python从入门到精通(DAY 3)
2015/12/20 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python中Lambda表达式详解
2019/11/20 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python如何绘制疫情图
2020/09/16 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
成品仓管员工作职责
2013/12/29 职场文书
烟台的海导游词
2015/02/02 职场文书
导游词怎么写
2015/02/04 职场文书
民政局未婚证明
2015/06/15 职场文书