配合el-table的span-method属性，第一列相同数据行合并

:span-method="Function({ row, column, rowIndex, columnIndex })"

1.1. 使用el-table组件自带的span-method属性自定义合并单元格逻辑

cellMerge({ row, column, rowIndex, columnIndex }){
  // 这里判断是否为第一列
  if(columnIndex === 0){ 
    /**
      这一段是根据我项目中的数据结苟获取表格数组，
      这里的 value 便是表格:data属性绑定的数组。
      let { subName, value } = this.substationData.items.find(ele => {
        return ele.subName === row.subName;
      });
    */
    // 判断是否为一段重复数据行的初始行
    // devName 为第一列数据的属性名
    if(rowIndex === 0 || row.devName !== value[rowIndex - 1].devName){
      let val = row.devName;
      let rowspan = 1;
      for(let i = rowIndex + 1;i < value.length; i++){
        if(value[i].devName !== val){
          break;
        }
        rowspan++;
      }
      // 这个循环内的代码用来解决1.2中的问题，若没有1.2中的问题，则可以忽略。
      for (let i = rowIndex; i < rowIndex + rowspan; i++) {
        // 从合并的第一行开始，给每行都加上一个rowColor属性，用来标识行样式。
        // 此处我只需要亮暗斑马纹显示，所以直接用"light"与"dark"。
        if(rowIndex === 0 || value[rowIndex - 1].rowColor === "dark"){
          this.$set(value[i], "rowColor", "light");
        }else if(value[rowIndex - 1].rowColor === "light"){
          this.$set(value[i], "rowColor", "dark");
        }
      }
      
      return [rowspan, 1];
    }else{
      return [0, 0];
    }
  }
}

1.2. 单元格合并后，表格需要斑马纹展示的话，就会有如下图的显示问题。

原本的斑马纹是用css的nth-child()选择器直接以奇偶行分背景色实现的。

这里使用el-table自带的row-style属性，传入一个自定义样式的方法。

rowStyle({row, rowIndex}){
  let style = {};
  // rowColor属性在上面的 cellMerge方法中赋值。
  if(row.rowColor === "light"){
    style.backgroundColor = "rgba(9, 50, 90, 0.5)";
    style.color = "#ffffff";
  }else if(row.rowColor === "dark"){
    style.backgroundColor = "rgba(8, 38, 76, 0.9)";
    style.color = "#c8c8c8";
  }
  return style;
},