项目要求第一列相同数据合并、第2列和第3列,根据第2列和第1列元素值合并
注意:合并前,保证数据排序正确
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%;">
<el-table-column v-for="(head,index) in tableHead" :key="index" :prop="head.prop" :label="head.label" show-overflow-tooltip :formatter="head.formatter"></el-table-column>
</el-table>
getSpanArr(prop){
let spanArr = []
let pos = ''
let data = this.tableData
if (this.type || prop == 'casePhase') {
data.forEach((item,rowIndex)=>{
if (rowIndex == 0) {
spanArr.push(1)
pos = 0
}else{
if (data[rowIndex-1][prop] == data[rowIndex][prop]) {
spanArr[pos] += 1
spanArr.push(0)
}else{
spanArr.push(1)
pos = rowIndex
}
}
})
}
if (!this.type && prop == 'resultSetId') {
data.forEach((item,rowIndex)=>{
if (rowIndex == 0) {
spanArr.push(1)
pos = 0
}else{
if ((data[rowIndex-1]['resultSetId'] == data[rowIndex]['resultSetId']) && (data[rowIndex-1]['casePhase'] == data[rowIndex]['casePhase'])) {
spanArr[pos] += 1
spanArr.push(0)
}else{
spanArr.push(1)
pos = rowIndex
}
}
})
}
return spanArr
},
objectSpanMethod({ row, column, rowIndex, columnIndex }){
const spanArr = this.getSpanArr('casePhase')
const _row_one = spanArr[rowIndex]
const _col_one = _row_one > 0 ? 1 : 0
const spanArrTwo = this.getSpanArr('resultSetId')
const _row_two = spanArrTwo[rowIndex]
const _col_two = _row_two > 0 ? 1 : 0
if (this.type) {
if (columnIndex === 0 ) {
return {
rowspan: _row_two,
colspan: _col_two
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}else{
if (columnIndex === 0 ) {
return {
rowspan: _row_one,
colspan: _col_one
}
} else if (columnIndex === 1 || columnIndex === 2) {
return {
rowspan: _row_two,
colspan: _col_two
}
} else {
return {
rowspan: 1,
colspan: 1
}
}
}
}