欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

elementUI table表格动态合并的示例代码

程序员文章站 2023-12-04 16:20:52
1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementui table组件的方法 :span-method="objectspanm...

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)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。