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 相关文章推荐
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
Nov 06 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 smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
2016/04/17 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
2017/03/01 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
pycharm 使用心得(三)Hello world!
2014/06/05 Python
wxPython事件驱动实例详解
2014/09/28 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
使用python求解二次规划的问题
2020/02/29 Python
Bulk Powders意大利:运动补充在线商店
2019/02/09 全球购物
音乐系毕业生自荐信
2013/10/27 职场文书
兰兰过桥教学反思
2014/02/08 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
兴趣班停课通知
2015/04/24 职场文书
股东协议书范本2016
2016/03/21 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Golang并发工具Singleflight
2022/05/06 Golang