el-table 的合并表格

在工作中会遇到一些表格合并的需求；在官网中也对合并的方法有一些简单的介绍，这里简单的总结了一下；

  <template>
    <div>
      <el-table :data="dataList" border :span-method="spanMethod">
        <el-table-column prop="dataCenter" label="数据中心"></el-table-column>
        <el-table-column prop="osVersion" label="操作系统"></el-table-column>
        <el-table-column prop="middlewave" label="版本管理"></el-table-column>
      </el-table>
    </div>
  </template>

data中的字段介绍：

dataList是表格数据；
mergeData是处理list中要合并的数据；
mergePos是合并行的记录;
mergeProp是mergeData中每项的索引（即list中的字段名）；
mergeKeys是要合并列的prop；

export default {
  data() {
    return {
      dataList: [{
        dataCenter: 'jqp',
        osVersion: '20.12.02',
        middlewave: 'win7',
      },{
        dataCenter: 'jqp',
        osVersion: '20.12.02',
        middlewave: 'win7',
      },{
        dataCenter: 'jqp',
        osVersion: '20.12.17',
        middlewave: 'win7',
      },{
        dataCenter: 'jqp',
        osVersion: '20.12.12',
        middlewave: 'win7',
      },{
        dataCenter: 'jqp',
        osVersion: '20.12.22',
        middlewave: 'win7',
      },{
        dataCenter: 'jqp',
        osVersion: '20.12.21',
        middlewave: 'win7',
      },{
        dataCenter: 'jqp',
        osVersion: '20.12.02',
        middlewave: 'win7',
      }],
      mergeData:[],
      mergePos: [],
      mergeProp: ['dataCenter', 'osVersion'],
      mergeKeys: ['dataCenter', 'osVersion'],
    };
  },
  created() {
    this.getSpanArr(this.dataList, this.mergeKeys);
  },
  methods: {
    spanMethod({
      column,
      rowIndex,
      columnIndex,
    }) {
      if (this.mergeProp.includes(column.property) && columnIndex === 0) {
        const rowspan = this.mergeData[column.property][rowIndex];
        const colspan = rowspan > 0 ? 1 : 0;
        return {
          rowspan,
          colspan,
        };
      }
    },
    getSpanArr(tableData, keyName) {
      this.mergeData = [];
      this.mergePos = [];
      keyName.forEach(kitem => {
        tableData.forEach((data, i) => {
          if (i === 0) {
            this.mergeData[kitem] = this.mergeData[kitem] || [];
            this.mergeData[kitem].push(1);
            this.mergePos[kitem] = 0;
          } else {
            // 判断当前元素与上一个元素是否相同
            // eslint-disable-next-line no-lonely-if
            if (data[keyName[0]] === tableData[i - 1][keyName[0]] && data[kitem] === tableData[i - 1][kitem]) {
              this.mergeData[kitem][this.mergePos[kitem]] += 1;
              this.mergeData[kitem].push(0);
            } else {
              this.mergeData[kitem].push(1);
              this.mergePos[kitem] = i;
            }
          }
        });
      });
    },
  },
}