【合并单元格】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】

<template>
  <el-table :span-method="spanMethod">
    <el-table-column label="组号" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row.group_number }}</span>
      </template>
    </el-table-column>
    <el-table-column label="公司名称" show-overflow-tooltip>
      <template slot-scope="scope">
        <span>{{ scope.row.corporate_name }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  data() {
    return {
      items: [需要合并单元格的元数据数组],
      //合并单元格用的字段（字段名和列名）
      spanFields: [
        { fieldName: "group_number", label: "组号" },
        { fieldName: "corporate_name", label: "公司名称" }
      ]
    };
  },
  created() {
    this.getSpanItems();
  },
  methods: {
    //【核心代码1】纵向合并单元格之前对数组处理【针对饿了么element的table的span-method合并行或列的计算方法】
    getSpanItems() {
      for (var j = 0, lenj = this.spanFields.length; j < lenj; j++) {
        var fieldName = this.spanFields[j].fieldName;
        var fieldLabel = this.spanFields[j].label;
        var arr = this.items,
          startItem = arr[0],
          rowSpan = 0;
        for (var i = 0, len = arr.length; i < len; i++) {
          var item = arr[i];
          item.rowSpan || (item.rowSpan = {});
          startItem[fieldName] !== item[fieldName] &&
            ((rowSpan = 0), (startItem = item));
          startItem.rowSpan[fieldLabel] = ++rowSpan;
        }
      }
    },
    //【核心代码2】合并单元格（这里只介绍纵向合并方法）
    spanMethod({ row, column, rowIndex, columnIndex }) {
      for (var i = 0, len = this.spanFields.length; i < len; i++) {
        var fieldLabel = this.spanFields[i].label;
        if (fieldLabel === column.label) {
          return [row.rowSpan[fieldLabel] || 0, 1];//这里返回的数组是[rowspan,colspan]，例如：[1,3]代表行不合并，列从第一列合并到第三列。
        }
      }
    }
  }
};
</script>