效果如图:
根据elementui 的合并代码基本满足不了需求
话不多说上代码:
//合并行和列
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
for(let i = 0;i < this.spanArr.length; i++){
if(rowIndex === i){
return {
rowspan: this.spanArr[i][columnIndex]>0? 1: 0,
colspan: this.spanArr[i][columnIndex]
}
}
}
},
//将数据处理 类似于[[1,1,3,0,0],[],[],[]]
getSpanArr(data) {
for (var i = 0; i < data.length; i++) {
let keys = Object.keys(data[i])
keys.unshift("www") //占位
keys.unshift("ddd") //占位
keys.pop() //占位对应
let arr = [],num = 0
//console.log(keys)
keys.forEach((it,idx) => {
if(idx === 0){
arr.push(1)
num = 0
}else if(idx === 1){
arr.push(1)
num = 1
}else{
// 判断当前元素与上一个元素是否相同
if (data[i][keys[idx]]&&data[i][keys[idx - 1]]&&data[i][keys[idx]] === data[i][keys[idx - 1]]) {
//console.log(data[i][keys[idx]],data[i][keys[idx - 1]], idx)
arr[num] += 1;
arr.push(0);
} else {
//console.log(idx)
arr.push(1);
num = idx;
}
}
})
this.spanArr.push(arr)
console.log(this.spanArr)
}
},
打印结果为:
因为是合并列,所以要将后台拿到的数据处理为2维数组,每条数据为一行数据
列:[
[1,1,2,0,3,0,0], //将此行的第3,4合并为一列,第5,6,7合并为一列
[1,5,0,0,0,0], //将此行的第2,3,4,5合并为一列
[2,0,4,0,0,0] //将此行的第1,2合并为一列,第3,4,5,6合并为一列
]