Vue实现自定义表格合并

在完成后台管理项目时，表格自然是必不可少的，但是表格如何根据返回的数据自定义去合并行呢。如下图。

 面对这种问题，我的思路是先对数据进行处理，找到应该合并的行所组成的数组，比如上图，所要合并的数组就为，[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
                }
            }
        },

这样就完成了表格自定义合并行