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操作cookie_获取与修改代码
May 21 Javascript
ExtJS扩展 垂直tabLayout实现代码
Jun 21 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
Aug 15 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
typescript编写微信小程序创建项目的方法
Jan 29 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中的按位与和按位或操作示例
2014/01/27 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
js控制TR的显示隐藏
2016/03/04 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
详解vue axios中文文档
2017/09/12 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
django 在原有表格添加或删除字段的实例
2018/05/27 Python
python保存文件方法小结
2018/07/27 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
Python实现图片添加文字
2019/11/26 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python __slots__的使用方法
2020/11/15 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
酒店中秋节促销方案
2014/01/30 职场文书
网吧消防安全责任书
2014/07/29 职场文书
公司证明怎么写
2014/09/22 职场文书
居委会工作总结2015
2015/05/18 职场文书
公司管理建议书
2015/09/14 职场文书
python基础之爬虫入门
2021/05/10 Python
Node.js实现断点续传
2021/06/23 Javascript
apache ftpserver搭建ftp服务器
2022/05/20 Servers
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python