el-table使用:span-method实现乱序对象数组合并相同项

el-table自带有合并单元格的功能，如下

<el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"></el-table>

 arraySpanMethod({ row, column, rowIndex, columnIndex }) {
   if (rowIndex % 2 === 0) {
     if (columnIndex === 0) {
       return [1, 2];
     } else if (columnIndex === 1) {
       return [0, 0];
     }
   }
 },

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
     if (rowIndex % 2 === 0) {
       return {
         rowspan: 2,
         colspan: 1
       };
     } else {
       return {
         rowspan: 0,
         colspan: 0
       };
     }
   }
 }
}

但是想要实现一些特殊合并效果，需要改变一下思路，如实现乱序对象数组合并相同项，实现思路如下：

从上述例子可知：

1. return可以是数组或对象，但都必须包含需合并的行列值，不合并为0,0
2. span-method没经过一个表项都会执行一次

因此，实现效果要保证:合并操作只能在合并项的第一个值时执行，其他都返回 0，0

综上，代码如下

// 首先将乱序的对象数组按中文拼音首字母排列
this.testPartInfo.sort((a, b)=> b.part_kind[0].localeCompare(a.part_kind[0], 'zh'));

// 定义spanArr数组，遍历的每个值如果是第一次出现push一个1并保存该值索引，如果下一个值跟这个值相同，索引对应值+1且spanArr数组push进一个0
getSpanArr(data){
for (let i = 0; i < data.length; i++) {
  if (i === 0) {
    this.spanArr.push(1);
    this.pos = 0
  } else {
    // 判断当前元素与上一个元素是否相同
    if (data[i].part_kind[0] === data[i - 1].part_kind[0]) {
        this.spanArr[this.pos]++;
        this.spanArr.push(0);
      } else {
        this.spanArr.push(1);
        this.pos = i;
      }
    }
  }
},

// 根据spanArr数组，当值不是0时证明他有相同项，那么执行合并操作，否则不操作
objectSpanMethod({ row, column, rowIndex, columnIndex }){
  if (columnIndex === 2&&this.spanArr.length!=0) {
    const _row = this.spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    console.log(_row, _col)
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

根据自己的需求，可以更改sort方法，只要将相同项按顺序排列，其他方法都不需要做出改动。