获取表格基础合并数组
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)
}
})
}
非合并情况下进行数组替换
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})
}
}
}合并单元格，table绑定
<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
}在项目中遇到了一个非常难受的合并,要把四级指标直接合并到三级指标中
给三级指标一列添加了class为thirdLevel，给四级指标一列添加class为fourthLevel
数据合并处理太过繁琐
后来用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
}
}
}
})就是要注意打开新的情况的时候先把前面的样式都清除
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
}
}
}