記錄element ui table表格spanMethod動態合併列

New：更簡潔的寫法參考： 點擊前往

先放幾個表格的圖看看

表格一：
預覽：https://jsfiddle.net/xmwh/2vh...

表格二：
預覽：https://jsfiddle.net/xmwh/s4g...

表格三：
預覽：https://jsfiddle.net/xmwh/vxL...

語言有點不太好描述，你們仍是看圖吧，看圖也能大概知道須要合併哪些，這些數據中指標、原材料名稱格式都是不必定的，因此合併起來有點困難，不一樣的列合併的個數也還不同，以前也提問過，不過沒人回答，只好本身google搜索了，找到了該篇文章https://blog.csdn.net/qq_2946...，本文內容實現方法都是參照這個來的。

通過改造後能夠多列不一樣行進行動態合併，核心代碼以下：

getSpanArr(tableData, keyName) {
  keyName.forEach((kitem, k) =>{
    tableData.forEach((data, i) =>{
      if (i === 0) {
        this.mergeData[kitem] = this.mergeData[kitem] || []
        this.mergeData[kitem].push(1) 
        this.mergePos[kitem] = 0
      } else {
        // 判斷當前元素與上一個元素是否相同
        if (data[kitem] === tableData[i - 1][kitem]) {
          this.mergeData[kitem][this.mergePos[kitem]] += 1
          this.mergeData[kitem].push(0)
        } else {
          this.mergeData[kitem].push(1) 
          this.mergePos[kitem] = i
        }
      }
    })
  }) 
  console.log(this.mergeData) 
  console.log(this.mergePos)
}

而後利用element table 提供的spanMethod方法進行表格合併操做

spanMethod({ row, column, rowIndex, columnIndex }){
    if (this.mergeProp.includes(column.property)) {
        const _row = this.mergeData[column.property + 'Id'][rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
    }
}

具體使用，請參考上面的預覽地址！