el-table 自動合併所有列

像這種 table 我想把每列相同內容的單元格合併，並且 table 欄位和行資料都是動態的，怎麼處理？
我們可以用 el-table 的 span-method 方法實現



進入介面時候首先呼叫 table 列表 API 獲取表頭欄位 和行資料，然後進行要合併行和列進行雙向繫結

---------------------核心程式碼邏輯------------------------------
tableHeader 是後端返回的表頭欄位, tableData 是後端返回的行資料

getSpanArr() {
for (let i = 0; i < this.tableData.length; i++) {
if (i === 0) {
for (let j = 0; j < this.tableHeader.length; j++) {
this.spanArr[i * this.tableHeader.length + j] = {
rowspan: 1,
colspan: 1,
}
}
} else {
for (let j = 0; j < this.tableHeader.length; j++) {
const currentTitle = this.tableHeader[j]['title']
const currentValue = this.tableData[i][currentTitle]
const previousValue = this.tableData[i - 1][currentTitle]
if (currentValue === previousValue) {
let beforeItem =
this.spanArr[(i - 1) * this.tableHeader.length + j]
this.spanArr[i * this.tableHeader.length + j] = {
rowspan: 1 + beforeItem.rowspan,
colspan: 1,
}
beforeItem.rowspan = 0
beforeItem.colspan = 0
} else {
this.spanArr[i * this.tableHeader.length + j] = {
rowspan: 1,
colspan: 1,
}
}
}
}
}
let stack = []
for (let i = 0; i < this.tableHeader.length; i++) {
for (let j = 0; j < this.tableData.length; j++) {
if (j === 0) {
if (this.spanArr[j * this.tableHeader.length + i].rowspan === 0) {
stack.push(this.spanArr[j * this.tableHeader.length + i])
}
} else {
if (this.spanArr[j * this.tableHeader.length + i].rowspan === 0) {
stack.push(this.spanArr[j * this.tableHeader.length + i])
} else {
stack.push(this.spanArr[j * this.tableHeader.length + i])
while (stack.length > 0) {
let pop = stack.pop()
let len = stack.length
this.spanArr[(j - len) * this.tableHeader.length + i] = pop
}
}
}
}
}
},