需求:
合并 相同名称的产品
先说下elementUI合并单元格的方法,先计算好要合并的行数rowspan,return {rowspan,colspan},其他的单元格return{0,0}
getData(params) {
//临时数组,存放产品名称相同的数量
this.tempArr = []
getTableData(params).then(response => {
this.tableData = response.data
//获取到表格数据后,通过遍历获取各个产品的数量
for (let i = 0; i < this.tableData.length; i++) {
if (i === 0) {
this.tempArr.push(1)
} else {
//一样的产品Id就累加产品数量,用0补齐要合并的位置
if (this.tableData[i].prod_id === this.tableData[i - 1].prod_id) {
this.tempArr[pos] += 1
this.tempArr.push(0)
} else {
this.tempArr.push(1)
pos = i
}
}
}
})
},
spanMethod({row, column, rowIndex, columnIndex}) {
if (columnIndex === 0) {
if (this.tempArr[rowIndex]) {
return {
rowspan: this.tempArr[rowIndex],
colspan: this.tempArr[rowIndex] > 0 ? 1 : 0,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
}
},
合并固定的两行单元格
spanMethod({ row, column, rowIndex, columnIndex }){
...
//12列之前合并起来
if (columnIndex < 12)
if (rowIndex % 2 === 0) {
return {rowspan: 2, colspan: 1}
} else {
return {rowspan: 0, colspan: 0}
}
}
},