Element的table用span-method合并行

方案一

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
    if (columnIndex === 0) {    //用于设置要合并的列
        if (rowIndex % 2 === 0) {   //用于设置合并开始的行号
            return {
                rowspan: 2,　　　　　//合并的行数
                colspan: 1          //合并的列数，设为０则直接不显示
            };
        } else {
            return {
                rowspan: 0,
                colspan: 0
            };
        }
    }
}

对官方例子进行研究之后，发现实现合并行的方法在每一行数据渲染的时候都会执行，只不过在渲染过程中我们设置了它合并的行数和列数，以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。

HTML

<el-table
      :data="tableData" border style="width: 100%;max-height: 160px;overflow: auto" :span-method="cellMerge">
    ......
</el-table>

JS

//合并自定义方法
cellMerge({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
},
//处理数据的方法
getSpanArr(data) {　
  var spanArr2 = [];
  var pos2 ;
  for (var i = 0; i < data.length; i++) {
        if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
    	 	  if (data[i].name === data[i - 1].name) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
        }
    }
},

​ data就是我们从后台拿到的数据，通常是一个数组；spanArr是一个空的数组，用于存放每一行记录的合并数；pos是spanArr的索引。上述代码意思是：如果是第一条记录（索引为０），向数组中加入１，并设置索引位置；如果不是第一条记录，则判断它与前一条记录是否相等，如果相等，则向spanArr中添入元素０，并将前一位元素＋１，表示合并行数＋１，以此往复，得到所有行的合并数，０即表示该行不显示。

​ 以上代码只是设置了一列的合并, 想合并第二列的单元格只要在cellMerge里加多一个判断类型else if(columnIndex === 1)，然后再复制一个getSpanArr2()方法（复制getSpanArr()就行了），同时声明spanArr2和pos2，最后把getSpanArr2()方法里的if (data[i].name === data[i - 1].name)中的name改成你data（后台接口中拿到的数据）中想要合并单元格的对象，比如data.id或者data.user之类的。如果还要合并第三列、第四列…，如此在cellMerge里增加else if(columnIndex === 2)、else if(columnIndex === 3)…判断类型就行了

方案二

HTML:

先定义好表格的相关行列，按照官方给出的例子，使用**:span-method=“objectSpanMethod”**进行自定义合并

<div class="grid-box">
      <el-table :data="tableData" :span-method="objectSpanMethod" border height="100%"  style="width: 100%;">
		......//省略定义列的代码
      </el-table>
</div>

JS:

//合并自定义方法
objectSpanMethod:function({ row, column, rowIndex, columnIndex }) {
    const span = column['property'] + '-span'
    if(row[span]){
        return row[span]
    }
},

用objectSpanMethod方法进行自定义合并行时，前提需要先对table数据进行处理。

1. 后端需要将数据进行排序, 让需要合并的数据相邻

   //页面行合并需要排序
   Collections.sort(result, new Comparator<Map<String, Object>>() {
       @Override
       public int compare(Map<String, Object> o1, Map<String, Object> o2) {
           return String.valueOf(o2.get("energyName")).compareTo(String.valueOf(o1.get("energyName")));
       }
   });
   

2. 前端对数据进行处理

//对请求接口返回的 数据进行处理
getData: function () {
    var _this = this;
    $.ajax({
        url: '',
        type: 'post',
        data: {time: _this.dateTime, type: _this.type},
        success: function (result) {
            _this.tableData = result;
            //要对energyName和processName进行行合并
            mergeTableRow(_this.tableData,['energyName','processName']);
        }
    });
}
/**
 * 对需要合并的数据进行处理
 * @param data: table数据
 * @param merge: 需要合并的列名数组
 * @returns {*}
 */
function mergeTableRow(data, merge) {
    if (!merge || merge.length === 0) {
        return data
    }
    merge.forEach((m) => {
        const mList = {}
        data = data.map((v, index) => {
            const rowVal = v[m]
            if (mList[rowVal] && mList[rowVal].newIndex === index) {
                mList[rowVal]['num']++
                mList[rowVal]['newIndex']++
                data[mList[rowVal]['index']][m + '-span'].rowspan++
                v[m + '-span'] = {
                    rowspan: 0,
                    colspan: 0
                }
            } else {
                mList[rowVal] = {num: 1, index: index, newIndex: index + 1}
                v[m + '-span'] = {
                    rowspan: 1,
                    colspan: 1
                }
            }
            return v
        })
    })
    return data
}

参考:
https://blog.csdn.net/qq_29468573/article/details/80742646
https://blog.csdn.net/zsl471260400/article/details/90675667