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 相关文章推荐
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
简单实现轮播图效果的实例
Jul 15 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
js判断输入框不能为空格或null值的实现方法
Mar 02 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 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的引用原因分析
2012/09/06 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
庆中秋节主题活动方案
2014/02/03 职场文书
校园环保标语
2014/06/13 职场文书
开除通知书范本
2015/04/25 职场文书
刑事起诉书范文
2015/05/19 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
Apache POI的基本使用详解
2021/11/07 Servers
Python学习之os包使用教程详解
2022/03/21 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技
Python循环之while无限迭代
2022/04/30 Python