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 相关文章推荐
鼠标移动到一张图片时变为另一张图片
Dec 05 Javascript
js类后台管理菜单类-MenuSwitch
Sep 12 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
基于canvas实现的钟摆效果完整实例
Jan 26 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
快速使用Bootstrap搭建传送带
May 06 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
Sep 23 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
发布Angular应用至生产环境的方法
Dec 10 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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
Win下如何安装PHP的APC拓展
2013/08/07 PHP
使用PHP把HTML生成PDF文件的几个开源项目介绍
2014/11/17 PHP
PHP多维数组遍历方法(2种实现方法)
2015/12/10 PHP
PHP中16个高危函数整理
2019/09/19 PHP
JS 控制CSS样式表
2009/08/20 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
2018/08/08 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python实现的RSS阅读器实例
2015/07/25 Python
Python的标准模块包json详解
2017/03/13 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
解决Django连接db遇到的问题
2019/08/29 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
广州品高软件.net笔面试题目
2012/04/18 面试题
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
财务人员个人求职信范文
2013/12/04 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
2015新生加入学生会自荐书
2015/03/24 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技