スニペット要素テーブルは同じ属性を持つセルを自動的にマージします

テーブルの結合方法を記録します。この方法では、マージする必要がある最初の列のみが考慮され、残りの列は独自に展開できます。

APIの説明: https://element.eleme.cn/#/zh-CN/component/table

その中で:replaceYouKeyマージする必要がある属性に置き換えます

compute 属性を使用して、使用されるデータ構造をキャッシュします。

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
      };
    }

テーブルのレンダリング方法を定義する

 // 包含当前行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
          };
        }
      }
    },
  }

効果は次のとおりです。