el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。
比如:代码中定义:span-method="objectSpanMethod"
{{ scope.row.match }}无 查看
objectSpanMethod实现是在方法区,具体内容是根据变量rowSpanList 去决定当前单元格是展示还是删除,展示的话是展示几行一列。
objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (row && columnIndex == 0 && column.label === "广告位showid") {if (this.rowSpanList && this.rowSpanList[rowIndex]) {let rowSpan = this.rowSpanList[rowIndex];return [rowSpan, 1];// 相同id有几个就绘制成几行一列} else {return [0, 0];// 重复的id值,已经绘制过,不需要在展示id了,删除掉改单元格的绘制}}},
{ row, column, rowIndex, columnIndex }四个参数表示row行数据,column列数据,rowIndex行标,columnIndex列标
rowSpanList是记录id分布的, 是在展示数据获取及处理时计算生成的,大致逻辑是
若当前id与列表中上一个数据的id相同:
if ( this.info.sids[i].id ===this.info.sids[i - 1].id)
该相同id的起始位置标记是position
相同的话计数rowSpanList加1:this.rowSpanList[position] += 1
this.rowSpanList = [];var position = 0;for (var i in this.info.sids) {if (i === "0") {position = 0;this.rowSpanList.push(1);} else {if (this.info.sids[i].id ===this.info.sids[i - 1].id) {this.rowSpanList[position] += 1; //项目名称相同,合并到同一个数组中this.rowSpanList.push(0);} else {this.rowSpanList.push(1);position = i;}}
最后this.rowSpanList可能值是[2,0,3,0,0,1]
数字2表示有两个一样的,在table渲染中表示该单元格需要占位2行1列。
0表示跟上一个id一样,不需要标记,在table渲染中表示该单元格需要删除。
上一篇:女生学什么专业好_女生就业前景好的专业排名 女生计算机专业考研什么专业好 统计学专业女生多还是女生多
下一篇:GTC 2023 | 「皮衣刀客」黄仁勋畅谈 AI Top 5,科学计算、生成式 AI、Omniverse 榜上有名