Vxe table/grid cell grouping and merging

Columns to merge

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

  General merger , Without logic , Directly merge the columns with the same name corresponding to their respective columns , As shown below , Not contract data , Have the same value , Directly merged

  Combined with logical differentiation , It will judge the consistency of the previous fields in turn before merging the following fields , The renderings are as follows ：

 

Realize the idea ：

1、 Configure the fields to be merged

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

2、 Realization vxe table perhaps grid How to merge

:span-method="mergeRowMethod"

3、 Specifically mergeRowMethod The implementation method is as follows

//  General row merge function （ Merge the same multiple columns of data into one row ）
    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 };
          }
        }
      }
    },
    // Cycle through the previous columns , If the values are different, they will not be merged 
    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;
    },