记录一下 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
};
}
定义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
};
}
}
},
}
效果如下: