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(hide方法)隐藏指定元素实例
Nov 11 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
js获取form表单中name属性的值
Feb 27 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
JS封装cavans多种滤镜组件
Feb 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
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php中session定期自动清理的方法
2015/11/12 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
python实现的文件同步服务器实例
2015/06/02 Python
python内存监控工具memory_profiler和guppy的用法详解
2019/07/29 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
python在协程中增加任务实例操作
2021/02/28 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
关于元旦的广播稿
2014/02/16 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
高三学生评语大全
2014/04/25 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
病人慰问信范文
2015/02/15 职场文书
欠款起诉书范文
2015/05/19 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android