使用 vxe-table 的 :span-method="mergeRowMethod"多列字段合并行方法:
mergeRowMethod ({ row, _rowIndex, column, visibleData }) {
// 定义要检查的字段列表
const fields = ['sku', 'creator']
// 获取上一行数据
const prevRow = visibleData[_rowIndex - 1]
// 初始化下一行数据
let nextRow = visibleData[_rowIndex + 1]
// 获取当前单元格的值
const cellValue = row[column.property]
// 查找当前字段在字段列表中的索引
const fIndex = fields.findIndex(e => e === column.property)
// 如果单元格的值存在且是当前字段
if (cellValue && fields.includes(column.property)) {
// 初始化检查字段的标记
let checkField = prevRow && true
// 从当前字段开始向前遍历字段列表
for (let index = fIndex; index >= 0; index--) {
// 检查上一行和当前行的对应字段是否相等
checkField = checkField && prevRow[fields[index]] && row[fields[index]] && prevRow[fields[index]] === row[fields[index]]
}
// 如果检查字段标记为真
if (checkField) {
// 返回rowspan和colspan都为0的对象
return {rowspan: 0, colspan: 0}
// 如果检查字段标记为假
} else {
// 初始化跨行数量
let countRowspan = 1
// 初始化检查下一个字段的标记
let checkNextField = true
// 当检查下一个字段的标记为真时，循环检查
while (checkNextField) {
// 从当前字段开始向前遍历字段列表
for (let index = fIndex; index >= 0; index--) {
// 检查下一行和当前行的对应字段是否相等
checkNextField = checkNextField && nextRow && nextRow[fields[index]] && row[fields[index]] && nextRow[fields[index]] === row[fields[index]]
}
// 验证下一个行是否符合条件
// 如果检查下一个字段的标记为真，则更新下一行数据并增加跨行数量
// 验证下一个行是否符合条件
if (checkNextField) nextRow = visibleData[++countRowspan + _rowIndex]
}
// 如果跨行数量大于1
if (countRowspan > 1) {
// 返回rowspan为跨行数量，colspan为1的对象
return { rowspan: countRowspan, colspan: 1 }
}
}
}
},
