在完成后台管理项目时,表格自然是必不可少的,但是表格如何根据返回的数据自定义去合并行呢。如下图。
面对这种问题,我的思路是先对数据进行处理,找到应该合并的行所组成的数组,比如上图,所要合并的数组就为,[4,0,0,0,4,0,0,0,1],意思是前四个合并,再往下四个再合并,最后再合并一个,我们首先要自定义一个空数组和一个初始值为0的变量 代码如下:
data(){
return{
mergeSkuList:[],
merge:0
}
}
然后对请求来的数据进行处理
changeGoodInfo(id) {
// 每次请求初始化数组
this.mergeSkuList=[]
this.merge=0
let data = {
goodsId: id
}
querySkuInventory(data).then(res => {
if (res.data.code == '0') {
this.skuList=res.data.data
// 表格合并处理
this.skuList.forEach((item,index)=>{
if(index==0){
this.mergeSkuList.push(1)
this.merge=0
}else{
if(this.skuList[index].specsOneName==this.skuList[index-1].specsOneName){
this.mergeSkuList[this.merge]+=1
this.mergeSkuList.push(0)
}else{
this.mergeSkuList.push(1)
this.merge=index
}
}
})
console.log(this.mergeSkuList);
} else {
this.$message.error(res.data.msg)
}
})
},
最后循环输出要合并的行和列
// 合并表格行列的方法
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: this.mergeSkuList[rowIndex],
colspan: 1
}
}
},
这样就完成了表格自定义合并行