Vxe Table/Grid 单元格分组合并

要合并的列

['htbm','htmc','hetd','hetdws','yjs']

 一般的合并，不带逻辑，直接就把各自列对应的相同名字的列合并了，如下所示，不是合同的数据，值一样，直接给合并了

 加上逻辑区分后的合并，会依次判断前面的字段一致后才合并后面的字段，效果图如下：

 

实现思路：

1、配置要合并的字段

:mergeFields="['htbm','htmc','hetd','hetdws','yjs']"

2、实现vxe table或者grid的合并方法

:span-method="mergeRowMethod"

3、具体mergeRowMethod的实现方法如下

// 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = this.mergeFields;
      if (fields.length == 0) {
        return;
      }
      const cellValue = row[column.property];
      if (
        cellValue != undefined &&
        cellValue != null &&
        fields.includes(column.property)
      ) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        //if (prevRow && prevRow[column.property] === cellValue) {
        if (prevRow && this.checkMergeFields(row, prevRow, column.property)) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          //while (nextRow && nextRow[column.property] === cellValue) {
          while (nextRow && this.checkMergeFields(row, nextRow, column.property)) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    //循环判断前面的列，如果值不一样的话就不合并
    checkMergeFields(row, nextRow, property) {
      var ret = true;
      for (var i = 0; i < this.mergeFields.length; i++) {
        var field = this.mergeFields[i];
        if (nextRow[field] != row[field]) {
          ret = false;
          break;
        }
        if (field == property) {
          break;
        }
      }

      return ret;
    },