直接上代码:
效果如下:
把pubType相同的单元格进行合并, 加上属性rowspan
setrowspans方法可以在接口返回数据后,执行此方法。
// 设置合并行
setrowspans() {
// 先给所有的数据都加一个v.rowspan = 1
this.tableData1.forEach(v => {
v.rowspan = 1
})
// 双层循环
for (let i = 0; i < this.tableData1.length; i++) {
// 内层循环,上面已经给所有的行都加了v.rowspan = 1
// 这里进行判断
// 如果当前行的id和下一行的id相等
// 就把当前v.rowspan + 1
// 下一行的v.rowspan - 1
for (let j = i + 1; j < this.tableData1.length; j++) {
if (this.tableData1[i].pubType === this.tableData1[j].pubType) {
this.tableData1[i].rowspan++
this.tableData1[j].rowspan--
}
}
// 这里跳过已经重复的数据
i = i + this.tableData1[i].rowspan - 1
}
},
// 合并行
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return {
rowspan: row.rowspan,
colspan: 1
}
}
},
完毕。