一、处理列表数组,统计需要合并的列,如这里需要合并的是tableData里面的date。其实就是计算哪个合并的值,需要合并多少行。
// 建立相同行关系
\// 按key为合并行名,value为合并行数存储
// 计算相同行key值和行数
this.tableData.map(item => {
if (item.date in this.colSpan) { // 判断当前已有值在相同行关系列表中,有则递增,没有则赋值为1
this.colSpan[item.date]++
} else {
this.$set(this.colSpan,item.date,1)
}
})
二、element-ui table组件里的span-method属性添加以下逻辑
spanMethod({ row, column, rowIndex, columnIndex }) {
// 第一列时
if (columnIndex === 0) {
if (row.date in this.colSpan) {
const obj = {
// 设置合并值
rowspan: this.colSpan[row.date],
colspan: 1
}
delete this.colSpan[row.date]
return obj
} else {
// 其余被合并子项隐藏
return {
rowspan: 0,
colspan: 0
}
}
}
}