elementUI table表格动态合并的示例代码


Posted in Javascript onMay 15, 2019

1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo,做的很直白,不过不太符合业务。在网上找了篇文章参考了一下

2.效果图如下:

elementUI table表格动态合并的示例代码

在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。

3.代码:

//合并单元格 二维数组-> 根据“标识”去遍历数据
data() {

return {
  spanArr: [], //遍历数据时,根据相同的标识去存储记录
  pos: 0 // 二维数组的索引
}
}
// methods中定义方法
getSpanArr(data) {

let that = this
//页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
that.spanArr = []
that.pos = 0
//遍历数据
data.forEach((item, index) => {
  //判断是否是第一项
  if (index === 0) {
    this.spanArr.push(1)
    this.pos = 0
  } else {
    //不是第一项时,就根据标识去存储
    if (data[index].moldName === data[index - 1].moldName) {
      // 查找到符合条件的数据时每次要把之前存储的数据+1
      this.spanArr[this.pos] += 1
      this.spanArr.push(0)
    } else {
      // 没有符合的数据时,要记住当前的index
      this.spanArr.push(1)
      this.pos = index
    }
  }
 })
console.log(this.spanArr, this.pos)
},
// 列表方法
objectSpanMethod({rowIndex, columnIndex}) {

// 页面列表上 表格合并行 -> 第几列(从0开始)
// 需要合并多个单元格时 依次增加判断条件即可
if (columnIndex === 3) {
  // 二维数组存储的数据 取出
  const _row = this.spanArr[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
    rowspan: _row,
    colspan: _col
  }
  //不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false
} else {
  return false
}
}
created() {

let data = xxxxxxxxx
this.getSpanArr(data)
}

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

Javascript 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
javascript实现原生ajax的几种方法介绍
Sep 21 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
js返回上一页并刷新的多种实现方法
Feb 26 Javascript
详解js闭包
Sep 02 Javascript
javascript面向对象之对象的深入理解
Jan 13 Javascript
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
详解VUE调用本地json的使用方法
May 15 #Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 #Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 #Javascript
小程序绑定用户方案优化小结
May 15 #Javascript
pm2发布node配置文件ecosystem.json详解
May 15 #Javascript
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP获取对象属性的三种方法实例分析
2019/01/03 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
Js面试算法详解
2018/04/08 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
浅析Python中else语句块的使用技巧
2016/06/16 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python设计模式之MVC模式简单示例
2018/01/10 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
文史专业毕业生自荐信
2013/11/17 职场文书
招商业务员岗位职责
2013/12/16 职场文书
学术会议欢迎词
2014/01/09 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers