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 相关文章推荐
javascript 构造函数方式定义对象
Jan 02 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
vue移动端实现红包雨效果
Jun 23 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
Mar 29 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
详解Vue之事件处理
Jul 10 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
详解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注入实例
2006/10/09 PHP
PHP利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP句法规则详解 入门学习
2011/11/09 PHP
php简单的上传类分享
2016/05/15 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
JavaScript 继承使用分析
2011/05/12 Javascript
JS中FRAME的操作问题实例分析
2014/10/21 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
js密码强度校验
2015/11/10 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
javascript 中模板方法单例的实现方法
2017/10/17 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
浅谈如何通过node.js对数据进行MD5加密
2018/05/16 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
深入理解Python中的内置常量
2017/05/20 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python实现将多个空格换为一个空格.md的方法
2018/12/20 Python
详解opencv Python特征检测及K-最近邻匹配
2019/01/21 Python
Python实现二叉树的最小深度的两种方法
2019/09/30 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
幼儿园园长自我鉴定
2013/10/22 职场文书
会计人员岗位职责
2014/03/19 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库