合并相同数据表格

合并相同数据表格

<el-table :data="tableData" class="ele-table" :height="tableHeight" border stripe :span-method="objectSpanMethod">
    ...
</el-table>

data() {
    return {
        // 合并对象
        mergeObj: {},
        // 需要合并的列
        mergeFields: [ "yq", "qt", "type"],
    }
},
computed: {
    tableHeight() {
        return document.body.clientHeight - 330;
    },
},
methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (this.mergeFields.indexOf(column.property) > -1) {
        return {
          rowspan: this.mergeObj[column.property][rowIndex],
          colspan: 1,
        };
      }
    },
    getMergeObj(list) {
      this.mergeObj = {};
      // 标记
      let mack = 0;
      for (let key in list[0]) {
        if (this.mergeFields.indexOf(key) > -1) {
          this.mergeObj[key] = [];
          mack = 0;
          list.forEach((item, index) => {
            if (index === 0) {
              this.mergeObj[key].push(1);
            } else {
              if(key == 'qt' || key == 'remark') {
                // 气田合并不能超过油田
                if (item.yq != null && item.yq === list[index - 1].yq && item.qt === list[index - 1].qt) {
                  this.mergeObj[key][mack] += 1;
                  this.mergeObj[key].push(0);
                } else {
                  mack = index;
                  this.mergeObj[key].push(1);
                }
              } else {
                if (item[key] === list[index - 1][key] && (item[key] || item[key] === null || item[key] === "")) {
                  this.mergeObj[key][mack] += 1;
                  this.mergeObj[key].push(0);
                } else {
                  mack = index;
                  this.mergeObj[key].push(1);
                }
              }
            }
          });
        }
      }
    },
}