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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
Dec 23 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
jQuery实现的超简单点赞效果实例分析
Dec 31 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
实现两个文本框同时输入的实例
Sep 25 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
Mar 05 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 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设计模式中的工厂模式
2008/06/12 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
让焦点自动跳转
2006/07/01 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
2018/07/25 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python中正则表达式详解
2017/05/17 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python实现大学人员管理系统
2019/10/25 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
python zip,lambda,map函数代码实例
2020/04/04 Python
HTML5实现应用程序缓存(Application Cache)
2020/06/16 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
论文指导教师评语
2014/04/28 职场文书
淘宝好评语大全
2014/05/05 职场文书
承诺书格式
2014/06/03 职场文书
违纪检讨书
2015/01/27 职场文书
运动会通讯稿600字
2015/07/20 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
python基础入门之字典和集合
2021/06/13 Python
代码复现python目标检测yolo3详解预测
2022/05/06 Python