elementUI table表格动态合并

1.最近在作的erp项目，有一个需求是同一个客户下的同种订单，须要合并展现。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo，作的很直白，不过不太符合业务。在网上找了篇文章参考了一下
2.效果图以下：

在动态处理从后端拿回来的数据的时候，是须要从数据中找到一个惟一的“标识”去判断是不是相同种类的数据。而后根据这个“标识”去作逻辑判断。
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)

}