Element Plus官方示例中提供了合并行与合并列的实现方法,但不满足项目中对某一属性相同的行进行合并的需求。现提供一种 根据相同属性值进行行合并 的方法:
获取属性值相同的连续的行:
/**
* 获取数组中具有指定属性值的连续元素组成的子数组
* @returns {Array} - 返回一个二维数组,内部数组表示连续具有目标属性值的元素集合
*/
export function getConsecutiveItems(arr, property, targetValue) {
const result = [];
let tempGroup = [];
for (let i = 0; i < arr.length; i++) {
// 如果是第一个元素或当前元素的属性值等于目标值且与上一个元素相同,则加入当前分组
if (!i || arr[i][property] === targetValue && arr[i][property] === arr[i - 1][property]) {
tempGroup.push(arr[i]);
} else {
// 属性值不等于目标值或与上一个元素的属性值不同,将当前分组推入结果数组并开始新的分组
if (tempGroup.length && tempGroup.every(item => item[property] === targetValue)) {
result.push(tempGroup);
}
tempGroup = [arr[i]];
}
}
// 处理最后一个分组
if (tempGroup.length && tempGroup.every(item => item[property] === targetValue)) {
result.push(tempGroup);
}
return result;
}
在el-table的span-method方法中调用:
/**
* 定义表格中单元格的合并方法
* @returns 返回一个对象,指定单元格的合并属性。如果不需要合并,则返回undefined
*/
const tbSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
// 当前列索引为0时,处理单元格合并
if (columnIndex === 0) {
const sameProp = 'name'
// 不是首次出现,不合并
if(rowIndex && row[sameProp] === gateData.value[rowIndex - 1]?[sameProp]){
return { rowspan: 0, colspan: 0 }
}
// 获取值相同的 连续的 行
let consecutiveSameRows = getConsecutiveItems(arrData.value, sameProp, row[sameProp])
const sameRows = consecutiveSameRows.length ? consecutiveSameRows[0] : []
if (sameRows.length) {
const uniqueProp = 'title'
// 如果当前行的站名(STNM)与首次出现站名相同,则进行合并
if (row[uniqueProp] === sameRows[0][uniqueProp]) {
return { rowspan: sameRows.length, colspan: 1 }
} else {
// 否则,不进行合并
return { rowspan: 0, colspan: 0 }
}
}
}
}