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)

}