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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
Date对象格式化函数代码
Jul 17 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
Uploadify上传文件方法
Mar 16 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
js生成word中图片处理方法
Jan 06 Javascript
vue iview实现动态路由和权限验证功能
Apr 17 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 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使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
js 数组操作代码集锦
2009/04/28 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
React-router中结合webpack实现按需加载实例
2017/05/25 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
2018/06/04 Javascript
通过JavaScript下载文件到本地的方法(单文件)
2019/03/17 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
图文详解WinPE下安装Python
2016/05/17 Python
对python函数签名的方法详解
2019/01/22 Python
Python多线程模块Threading用法示例小结
2019/11/09 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
150行python代码实现贪吃蛇游戏
2020/04/24 Python
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
工程造价自荐信
2013/10/09 职场文书
网上书店创业计划书
2014/01/12 职场文书
《雪儿》教学反思
2014/04/17 职场文书
区级文明单位申报材料
2014/05/15 职场文书
大型公益活动策划方案
2014/08/20 职场文书
关于读书的演讲稿800字
2014/08/27 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
2015年度党员自我评价范文
2015/03/03 职场文书
党员心得体会范文2016
2016/01/23 职场文书
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
基于Python实现流星雨效果的绘制
2022/03/18 Python