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 相关文章推荐
JS 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
Aug 30 Javascript
Javascript图像处理—为矩阵添加常用方法
Dec 27 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
Javascript堆排序算法详解
Dec 03 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 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
咖啡与牛奶
2021/03/03 冲泡冲煮
生成卡号php代码
2008/04/09 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
php控制文件下载速度的方法
2015/03/24 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
ionic 自定义弹框效果
2017/06/27 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
js实现磁性吸附的示例
2020/10/26 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python turtle库的画笔控制说明
2020/06/28 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
英语系毕业生求职信
2014/07/13 职场文书
2014公司年终工作总结
2014/12/19 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS