snippets element table automatically merges cells with the same attributes

Record the table merging method. This method only considers the first column that needs to be merged, and the remaining columns can be expanded on their own.

API description: https://element.eleme.cn/#/zh-CN/component/table

Among them: replaceYouKeyReplace with the attribute you need to merge

Use a compute attribute to cache the data structure used

spanData() {
		// 记录合并长度
      const cacheMap = {};
      // 记录 key 出现的顺序
      const stepKeys = [];
      // 记录进行换行的 index
      const stepData = [0];
      for (let index = 0; index < this.recordList.length; index++) {
        const { replaceYouKey } = this.tableList[index];
        if (cacheMap[replaceYouKey]) {
          cacheMap[replaceYouKey] += 1;
        } else {
          stepKeys.push(replaceYouKey);
          cacheMap[replaceYouKey] = 1;
        }
      }
      stepKeys.forEach(k => {
        stepData[stepData.length] = stepData[stepData.length - 1] + cacheMap[k];
      });
      return {
        data: cacheMap,
        stepData
      };
    }

Define table rendering method

 // 包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性
    spanMethod({ rowIndex, columnIndex, row }) {
    // 业务只需要考虑第一个列合并
      if (columnIndex === 0) {
        const { replaceYouKey } = row;
        const { data: tableSpanData, stepData } = this.spanData;
        const length = tableSpanData[replaceYouKey];
        const hasStart = stepData.includes(rowIndex);
        if (length && hasStart) {
          return {
            rowspan: length,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
  }

The effect is as follows: