Get the table base merged array
getIndex(){
let table = this.tableData
this.spanArray = []
table.forEach((item,index)=>{
if(index === 0){
this.spanArray.push({sameName:item.matterOrg,flag:0,arr:[]})
this.spanArray.push({sameName:item.matterId,flag:0,arr:[]})
this.spanArray.push({sameName:item.materialId,flag:0,arr:[]})
this.spanArray.push({sameName:item.itemId,flag:0,arr:[]})
this.spanArray.push({sameName:item.confirmId,flag:0,arr:[]})
this.spanArray.push({sameName:item.cmaterialId,flag:0,arr:[]})
this.spanArray.push({sameName:item.citemId,flag:0,arr:[]})
}else{
this.getSpan(item.matterOrg,index,0,table.length)
this.getSpan(item.matterId,index,1,table.length)
this.getSpan(item.materialId,index,2,table.length)
this.getSpan(item.itemId,index,3,table.length)
this.getSpan(item.confirmId,index,4,table.length)
this.getSpan(item.cmaterialId,index,5,table.length)
this.getSpan(item.citemId,index,6,table.length)
}
})
}
Array replacement without merging
getSpan(value,index,arrayIndex,tableLength){
if(value !== this.spanArray[arrayIndex].sameName || !value){
this.spanArray[arrayIndex].arr.push({ row:this.spanArray[arrayIndex].flag,
length:index - this.spanArray[arrayIndex].flag})
this.spanArray[arrayIndex].sameName = value
this.spanArray[arrayIndex].flag = index
if(index === tableLength-1){
this.spanArray[arrayIndex].arr.push({ row:this.spanArray[arrayIndex].flag,
length: 1})
}
}else{
if(index === tableLength-1){
this.spanArray[arrayIndex].arr.push({ row:this.spanArray[arrayIndex].flag,
length: index+1 - this.spanArray[arrayIndex].flag})
}
}
}Merge cells, table binding
<el-table :data="tableData" v-loading="loading" border style="width: 100%;" :span-method="arraySpanMethod">
arraySpanMethod: function({ row, column, rowIndex, columnIndex }){
let col = [
[1],[2,3],[4,5],[6],[7,8,9],[10,11],[12,13]
]
let flag = 1
let obj = [0, 0]
if(columnIndex === 0){
obj = [1, 1]
}else{
col.forEach((colArray,arrayIndex)=>{
if(flag === 1){
colArray.forEach((colIndex)=>{
if (columnIndex === colIndex && flag === 1) {
if(this.spanArray[arrayIndex].arr.length >0 ){
this.spanArray[arrayIndex].arr.forEach(item => {
if (rowIndex === item.row) {
obj = [item.length, 1]
flag = 0
}
})
}else{
obj = [1, 1]
}
}
})
}
})
}
return obj
}I encountered a very uncomfortable merger in the project. The four-level indicators should be directly merged into the third-level indicators.
Add class as thirdLevel to the third level indicator column, and add class as fourthLevel to the fourth level indicator column
Data merging process is too cumbersome
Later solved it with js+css
this.$nextTick(()=>{
for(var i=0;i<document.getElementsByClassName('fourthLevel').length;i++){
//i==0 为表头列
if(!document.getElementsByClassName('fourthLevel')[i].children[0].innerHTML || i==0){
document.getElementsByClassName('fourthLevel')[i].style.display="none"
if(document.getElementsByClassName('fourthLevel')[i].previousSibling.className.indexOf('thirdLevel') > -1){
document.getElementsByClassName('fourthLevel')[i].previousSibling.colSpan = 2
}
}
}
})Just be careful to clear all the previous styles when opening a new situation
for(var i=0;i<document.getElementsByClassName('fourthLevel').length;i++){
if(!document.getElementsByClassName('fourthLevel')[i].children[0].innerHTML|| i==0){
document.getElementsByClassName('fourthLevel')[i].style.display="table-cell"
if(document.getElementsByClassName('fourthLevel')[i].previousSibling.className.indexOf('thirdLevel') > -1){
document.getElementsByClassName('fourthLevel')[i].previousSibling.colSpan = 1
}
}
}