element实现合并单元格通用方法


Posted in Javascript onNovember 13, 2019

主要思路:

  1. 对数据进行处理,写了一个getSpanData通用方法。
  2. 用api中提供的span-method方法。

span-method方法用法:

通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan,第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

通用实例

demo.vue

<el-table
   v-loading="loading"
   ref="singleTable"
   :data="tableData"
   :span-method="handleObjectSpanMethod"
   highlight-current-row
   border
   style="width: 100%;margin-top:10px;"
   max-height="730"
  >

JavaScript

// 查询列表
 queryTableList() {
  getNeeds().then(res => {
   if (res.code === 0) {
   // 表格数据
    this.tableData = res.data
    // 对表格数据进行处理,找出需要合并的单元格
    this.getSpanData(this.tableData)
   } 
  })
 },
// 计算需要合并的单元格
getSpanData(data) {
 // 存放计算好的合并单元格的规则
 this.spanData = []
 for (var i = 0; i < data.length; i++) {
  if (i === 0) {
   this.spanData.push(1)
   this.pos = 0
  } else {
   // 判断当前元素与上一个元素是否相同
   if (data[i].realOpenDate === data[i - 1].realOpenDate) {
    this.spanData[this.pos] += 1
    this.spanData.push(0)
   } else {
    this.spanData.push(1)
    this.pos = i
   }
  }
 }
}
// 合并单元格
handleObjectSpanMethod({ row, column, rowIndex, columnIndex }) {
 // 需要合并的列
 // [0, 1, 2].includes(columnIndex ), 表示合并前三列
 if (columnIndex === 1) {
  const _row = this.spanData[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
   rowspan: _row,
   colspan: _col
  }
 }
}

getSpanData中spanData处理后的结构:

element实现合并单元格通用方法

数组中12的值表示需要合并的地方,很好理解,就是找到每行中columnIndex对应要合并的位置。

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

Javascript 相关文章推荐
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
Jul 09 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序实现留言板
Oct 31 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
vue flex 布局实现div均分自动换行的示例代码
Aug 05 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
vue之debounce属性被移除及处理详解
Nov 13 #Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 #Javascript
基于vue-cli3和element实现登陆页面
Nov 13 #Javascript
vue data引入本地图片的两种方式小结
Nov 13 #Javascript
You might like
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
PHP教程 变量定义
2009/10/23 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
表单内同名元素的控制
2006/11/22 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
2014/01/10 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python基础知识小结之集合
2015/11/25 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
如何用Django处理gzip数据流
2021/01/29 Python
Silk’n激光脱毛器官网:silkn.com
2016/10/06 全球购物
两道JAVA笔试题
2016/09/14 面试题
《两只鸟蛋》教学反思
2014/02/10 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
改革共识倡议书
2014/08/29 职场文书
个人作风建设总结
2014/10/23 职场文书
给男朋友的道歉短信
2015/05/12 职场文书
Java实现多线程聊天室
2021/06/26 Java/Android
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
Java版 单机五子棋
2022/05/04 Java/Android