一、页面配置
表格中添加:span-method="ObjectSpanMethod"绑定一个合并单元格的方法，这个方法会自动遍历所有单元格，并会带入行（row）、列（column）、行索引（rowIndex）、列索引（columnIndex）等参数用来判断和处理赋值。
v-if用于控制表格加载的时间节点，可以在列表查询数据并计算合并值后开启表格布局样式加载。
<el-table v-if="!show" :span-method="ObjectSpanMethod" border highlight-current-row :data="dataList" @selection-change="handleSelectionChange"><el-table-column label="测试字段1" align="center" prop="column1"></el-table-column><el-table-column label="测试字段2" align="center" prop="column2"></el-table-column> </el-table>
二、方法逻辑
1、在查询数据列表时，对返回的结果数据进行遍历处理
查询数据列表调用方式：
//获取列表 getList() {//查询参数let data = {}//调用接口获取数据getData(data).then(res=>{this.list = res.list;//遍历处理列表数据this.getSpanArr(this.list);});}
遍历处理方法：
//设置单元格 getSpanArr(list) {// 初始化list中每行数据的rowspan = 1,用来给行合并属性赋值list.forEach(item => {//需要合并行数（根据需要合并的字段看需要初始化几个）//合并行数1item.rowspan = 1;//合并行数2item.rowspanSecond = 1;});// 双层循环遍历进行合并所用数据的比对，累加合并行数for (let i = 0; i < list.length; i++) {for (let j = i + 1; j < list.length; j++) {//此处可根据相同字段进行合并if (list[i].columnFirst== list[j].columnFirst) {list[i].rowspan++;list[j].rowspan--;}//在第一个字段合并条件下针对第二个字段二级分组合并if (list[i].columnFirst == list[j].columnFirst && list[i].columnSecond == list[j].columnSecond) {list[i].rowspanSecond++;list[j].rowspanSecond--;}}// 这里跳过已经重复的数据(使用合并行列的最基础字段对应的合并行数)i = i + list[i].rowspan - 1;}//将计算结束的结果放入原用来回显表格的listthis.list= JSON.parse(JSON.stringify(list));},
2、根据列表计算处理后的rowspan值进行合并处理
// 根据计算的rowspan值和行、列、索引数据来调整表格单元格的合并行列数 ObjectSpanMethod({row, column, rowIndex, columnIndex}){// 第一列if (columnIndex === 1) {return {rowspan: row.rowspan,colspan: 1,};}if (columnIndex === 5) {return {rowspan: row.rowspanSecond,colspan: 1,};}}
