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 相关文章推荐
JSON取值前判断
Dec 23 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
js动态切换图片的方法
Jan 20 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
jQuery文字轮播特效
Feb 12 Javascript
Canvas实现动态的雪花效果
Feb 13 Javascript
在React 组件中使用Echarts的示例代码
Nov 08 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 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
自己写的兼容低于PHP 5.5版本的array_column()函数
2014/10/24 PHP
ThinkPHP添加更新标签的方法
2014/12/05 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
PHP实现会员账号单唯一登录的方法分析
2019/03/07 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS中常用的输出方式(五种)
2016/06/12 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
用vuex写了一个购物车H5页面的示例代码
2018/12/04 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
python语音识别实践之百度语音API
2018/08/30 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
三个python爬虫项目实例代码
2019/12/28 Python
墨西哥购物网站:Elektra
2020/01/21 全球购物
商务英语专业求职信
2014/06/26 职场文书
五一活动标语
2014/06/30 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
2014年组织部工作总结
2014/11/14 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL