前沿 ：

        为了更好的展示数据，很多地方用到表格合并，但是element文档里面没有好的合并方法，只能自定义合并表格来解决需求。于是乎，写了以下方法，方面以后拿来即用。

 

自定义合并表格

 表格数据

 tableData: [{id: "1",date: "2016-05-03",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},{id: "1",date: "2016-05-02",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},{id: "2",date: "2016-05-04",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},{id: "3",date: "2016-05-01",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},{id: "3",date: "2016-05-08",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},{id: "3",date: "2016-05-06",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},{id: "4",date: "2016-05-07",name: "王小虎",province: "上海",city: "普陀区",address: "上海市普陀区金沙江路 1518 弄",zip: 200333,articleNumber: 10,zipNumber: 15,},],

 计算每行需要合并的数量

// 计算每行需要合并的数量   tableData为请求获取的表格数据源getSpanArr() {this.spanArr = [];for (let i = 0; i < this.tableData.datalist.length; i++) {if (i === 0) {this.spanArr.push(1);this.pos = 0;} else {// 判断当前元素与上一个元素的ID是否相同if (this.tableData.datalist[i].productId === this.tableData.datalist[i - 1].productId) {this.spanArr[this.pos] += 1;this.spanArr.push(0);} else {this.spanArr.push(1);this.pos = i;}}}

getSpanArr 方法：这个方法用于计算每一行需要合并的数量，并存储在 spanArr 数组中。使用 productId 来判断当前行是否与前一行相同，如果相同则增加合并数量，否则重置合并计数。

 

 // 根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan 

支持不合并的列，增加判断条件即可，如：不合并第五列 ：  columnIndex !== 5 

// 根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspanobjectSpanMethod({ row, column, rowIndex, columnIndex }) {// 页面列表上 表格合并行 -> 第几列(从0开始)// 需要合并多个单元格时 依次增加判断条件即可if (columnIndex !== 4 && columnIndex !== 5 && columnIndex !== 6) { const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row,colspan: _col};} else {return false;}

 objectSpanMethod 方法： 这个方法根据列索引和 spanArr 中的值来确定单元格的 rowspan 和 colspan，从而实现表格行的合并。 我这里的需求是排除第4、5和6列的合并（基于0索引），其他列根据 spanArr 来设置合并属性。

// 异步获取数据并调用 getSpanArr 进行行合并计算

 getDataList() {//。。。。。this.tableData = res;//中间获取列表数据this.getSpanArr();
}

 附上效果图

 

🍉🍉🍉教程结束，觉得有帮助帮忙点个👍收藏关注，即拿即用，支持一下~