element-ui table span-method(行合并)的实现代码


Posted in Javascript onDecember 20, 2018

element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需要做一些修改。我们首先解读一下官网实例中的各参数的意义:

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {  //用于设置要合并的列
     if (rowIndex % 2 === 0) {  //用于设置合并开始的行号
      return {
       rowspan: 2,
 //合并的行数
       colspan: 1     //合并的列数,设为0则直接不显示
      };
     } else {
      return {
       rowspan: 0,
       colspan: 0
      };
     }
    }
   }

研究这个例子后不难发现,实现合并行的方法其实在每一行数据渲染的时候都会执行,只不过在渲染过程中我们设置了它合并的行数和列数,以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。处理过程如下:

getSpanArr(data) { 
 for (var i = 0; i < data.length; i++) {
    if (i === 0) {
       this.spanArr.push(1);
       this.pos = 0
    } else {
     // 判断当前元素与上一个元素是否相同
  if (data[i].name === data[i - 1].name) {
        this.spanArr[this.pos] += 1;
        this.spanArr.push(0);
       } else {
        this.spanArr.push(1);
        this.pos = i;
       }
    }
  }
},

data就是我们从后台拿到的数据,通常是一个数组;spanArr是一个空的数组,用于存放每一行记录的合并数;pos是spanArr的索引。上述代码意思是:如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,则向spanArr中添入元素0,并将前一位元素+1,表示合并行数+1,以此往复,得到所有行的合并数,0即表示该行不显示。

cellMerge({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
      const _row = this.spanArr[rowIndex];
      const _col = _row > 0 ? 1 : 0;
      return {
         rowspan: _row,
         colspan: _col
      }
   }
},

然后根据得到的数组spanArr对表格进行合并渲染,并绑定合并方法

<el-table
   border
   :data="tableData"
   style="width: 100%;max-height: 160px;overflow: auto"
   :span-method="cellMerge">
  ......
</el-table>

效果图如下:

element-ui table span-method(行合并)的实现代码

注:后台获取数据的时候根据要在前台进行合并的字段进行排序,使要合并的字段值相同的记录依次相邻。

合并多行的情况

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
   if (rowIndex === 1) {
    // 合并第二行
    if (columnIndex === 1) {
     // 从第二列开始
     return [2, 3]
     // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
     // 这里rowspan为2是行有两行合并,colspan为3是列有3列合并,你要合并几行几列就写上相应的数字

     // 这个判断是把第一行的第3列,第4列的值省略,在合并的表格右边直接填原先第5列的值,合并了几列,就省略几列的值
    } else if (columnIndex === 2 || columnIndex === 3) {
     return [0, 0]
    }
   } else if (rowIndex === 2 && (columnIndex === 1 || columnIndex === 2 || columnIndex === 3)) {
    // 第二行的第2个数,第3个数,第4个数都要省略
    return [0, 0]
   }
  }

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

Javascript 相关文章推荐
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
vue-cli3使用mock数据的方法分析
Mar 16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
Nov 12 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
fetch 如何实现请求数据
Dec 20 #Javascript
JS闭包经典实例详解
Dec 20 #Javascript
JS闭包原理与应用经典示例
Dec 20 #Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 #Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 #Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
Dec 20 #Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 #Javascript
You might like
星际争霸中的热键
2020/03/04 星际争霸
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP 采集心得技巧
2009/05/15 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
50个优秀经典PHP算法大集合 附源码
2020/08/26 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
js取得url地址参数实例
2013/02/22 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python打包可执行文件的方法详解
2016/09/19 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
国贸专业求职信
2014/06/28 职场文书
2014年护理部工作总结
2014/11/14 职场文书
财务会计岗位职责
2015/02/03 职场文书
公司辞职信模板
2015/05/13 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js