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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
vue axios请求成功却进入catch的原因分析
Sep 08 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设计模式 State (状态模式)
2011/06/26 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
js实现日期级联效果
2014/01/23 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
express+mockjs实现模拟后台数据发送功能
2018/01/07 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
Python入门之三角函数atan2()函数详解
2017/11/08 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
selenium使用chrome浏览器测试(附chromedriver与chrome的对应关系表)
2018/11/29 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
python中怎么表示空值
2020/06/19 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
Java模拟试题
2014/11/10 面试题
一年级家长会邀请函
2014/01/25 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
打架检讨书2000字
2014/02/22 职场文书
《小池塘》教学反思
2014/02/28 职场文书
《桥》教学反思
2014/04/09 职场文书
施工员岗位职责范本
2015/04/11 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL