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 模拟气泡屏保效果代码
Jul 10 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
javascript数组去重方法总结(推荐)
Mar 20 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
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
Apache中php.ini的设置方法
2013/02/28 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
JavaScript开发者必备的10个Sublime Text插件
2016/02/27 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python日期的加减等操作的示例
2017/08/15 Python
TensorFlow如何实现反向传播
2018/02/06 Python
python读写配置文件操作示例
2019/07/03 Python
python matplotlib库直方图绘制详解
2019/08/10 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
一套.net面试题及答案
2016/11/02 面试题
六个一活动实施方案
2014/03/21 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
校运会通讯稿
2015/07/18 职场文书
找规律教学反思
2016/02/23 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python