iview在4.0版本之后可謂是脫胎換骨籍救，并且更名為view-ui渠抹，在4.0后表格增加了拖拽調(diào)整列寬，行/列合并奇颠，合計(jì)等功能，此處還是有一些坑點(diǎn)記錄下來方便以后遇到能夠快速解決
方法描述
span-method指定合并行或列的算法函數(shù)烈拒，該方法接收四個(gè)對象作為參數(shù)，這個(gè)官網(wǎng)描述的很清楚荆几，但是返回值這里就有些讓人費(fèi)解了，在這貼出官網(wǎng)原話：該函數(shù)可以返回一個(gè)包含兩個(gè)元素的數(shù)組，第一個(gè)元素代表 rowspan蛋叼，第二個(gè)元素代表 colspan。 也可以返回一個(gè)鍵名為 rowspan 和 colspan 的對象狐胎。
rowspan和colspan是啥拔粘病松却？這讓人感到困惑，其實(shí)看完它的例子（踩了幾個(gè)坑）后就會(huì)發(fā)現(xiàn)這個(gè)方法返回值其實(shí)就是單元格占據(jù)的行和列
基本思路
我們可以用一個(gè)二維數(shù)組來實(shí)現(xiàn)一個(gè)與表格內(nèi)容一一對應(yīng)的layout晓锻，根據(jù)當(dāng)前的參數(shù)rowIndex, columnIndex返回layout[rowIndex][columnIndex]，表示表格內(nèi)容的排列方式
舉個(gè)例子
[[
[1,1], [1,1], [1,1]
],[
[1,1], [1,1], [1,1]
],[
[1,1], [1,1], [1,1]
]]
//表示一個(gè)三行三列不合并的表格
再舉一個(gè)例子
[[
[2,1], [1,1], [1,1]
],[
[0,0], [1,1], [1,1]
],[
[1,1], [1,1], [1,1]
]]
//表示三行三列第一列合并兩個(gè)單元格的表格
其實(shí)就是數(shù)組中的值為[1,1]代表默認(rèn)不合并独撇，[0,0]代表不顯示躁锁，如果有人說[1,0]或者[0,1]這樣的怎么辦？在view-ui中战转，這種情況也是按照[0,0]來處理的，知道這些我們就可以實(shí)現(xiàn)一個(gè)合并數(shù)據(jù)中重復(fù)出現(xiàn)的單元格的表格了
實(shí)現(xiàn)
handleSpan({ row, column, rowIndex, columnIndex }) {
return this.layoutArr[rowIndex][columnIndex]
},
getLayout() {
const arr = []
//得到一個(gè)普通布局?jǐn)?shù)組,即正常排列的表格
this.tableData.forEach(item=> {
arr.push([])
Object.keys(item).forEach(()=> {
arr[arr.length - 1].push([1,1])
})
})
for(let i = 0; i < arr.length; i++) {
for(let j = 0; j < arr.length; j++) {
const target = arr[i][j]
if(target[0] * target[1] !== 0) {
//合并列
for(let k = i + 1; k < arr.length; k++) {
if(this.tableData[i][j] === this.tableData[k][j]) {
target[0] += 1
arr[k][j] = [0,0]
} else {
break
}
}
//合并行
for(let k = j + 1; k < arr.length; k++) {
if(this.tableData[i][j] === this.tableData[i][k]) {
target[1] += 1
arr[k][i] = [0,0]
} else {
break
}
}
}
}
}
this.layoutArr = arr
}
