snippets element table 自动合并同属性单元格_element table 合并单元格 自动扩展

记录一下 table 合并方法。 此方法只考虑了第一个列需要合并，其余列可以自行扩展。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

定义table渲染方法

 // 包含当前行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
          };
        }
      }
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果如下：