参考地址： https://blog.csdn.net/qq_29468573/article/details/80742646

背景：

         element-ui官网中关于行合并的例子是根据行号进行合并的，不符合开发需求，因为通常table中的数据都是动态生成的，所以需要做一些修改

原案例：

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

备注：      实现合并行的方法其实在每一行数据渲染的时候都会执行，只不过在渲染过程中设置了它合并的行数和列数，以得到不同的效果。所以我们需要生成一个与行数相同的数组记录每一行设置的合并数。

操作步骤：

一、获取 合并信息数组（存放每一行记录的合并数）

getSpanArr(data) {　
  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({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
},

备注：  根据得到的数组spanArr对表格进行合并渲染，并绑定合并方法

三、html 标签使用  cellMerge()函数

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

四、页面效果

table 列表数据重新渲染数据发生格式错乱：

备注：this.spanArr = []; //一定、必须清空 

getSpanArr(data) {　
  this.spanArr = []; //必须清空
  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;
              }
        }
    }
},