element-ui el-table 如何实现合并单元格
创始人
2025-06-01 07:21:32

el-table的组件的可以合并单元格,先定义参数span-method 方法objectSpanMethod。在方法内控制当前单元格渲染成几个单元格或者删除掉当前单元格。

比如:代码中定义:span-method="objectSpanMethod"

 

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渲染中表示该单元格需要删除。

相关内容

热门资讯

年内浮盈超百亿 公募定增“擒牛...   在A股持续围绕科技主线演绎的2025年,部分公募机构调整定增策略,将资金密集投向硬科技与新兴产业...
业务员的岗位职责 业务员的岗位... 业务员岗位职责(一)   1.承办各项业务工作,做到:积极联系,事前请示、事后汇报,忠于职守、廉洁奉...
地产置业顾问岗位职责 置业顾问...   置业顾问本身应该精通房产的相关基础知识;另外应该熟悉售楼的循环流程,应该掌握销售技巧如谈判技巧,...
房地产公司行政副总经理岗位职责...   1、在董事长的领导下,全面负责公司行政管理、协调与服务工作。   2、建立建全公司规章制度体系,...
房地产公司行政部职责 企业综合...   一、综合协调公司各部门的日常工作。协助分管经理安排好一个时期的工作布局;加强督办检查工作;做好部...