spanMethod主表页面表格行列合计
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3代码
//生成的vue标签上添加方法
<view-grid :spanMethod="spanMethod"></view-grid>
//合并计算示例
const spanMethod=({ row, column, rowIndex, columnIndex }, rows)=> {
// 假设要合并第1列(columnIndex === 1)
if (columnIndex === 1) {
// 获取当前列的字段名
const field = columns[columnIndex].field
// 如果是第一行,从这一行开始统计
if (rowIndex === 0) {
let count = 1 // 记录相同值的数量
// 向下查找相同值的行数
for (let i = 1; i < rows.length; i++) {
if (rows[i][field] === row[field]) {
count++
} else {
break
}
}
// 返回要合并的行数
return {
rowspan: count,
colspan: 1
}
} else {
// 检查当前行的值是否与上一行相同
const prevRow = rows[rowIndex - 1]
if (prevRow && row[field] === prevRow[field]) {
// 如果与上一行相同,则不显示
return {
rowspan: 0,
colspan: 0
}
}
// 如果与上一行不同,需要计算向下合并的行数
let count = 1
for (let i = rowIndex + 1; i < rows.length; i++) {
if (rows[i][field] === row[field]) {
count++
} else {
break
}
}
return {
rowspan: count,
colspan: 1
}
}
}
}
vue2 代码
//合并计算示例
spanMethod({ row, column, rowIndex, columnIndex }, rows) {
// 假设要合并第1列(columnIndex === 1)
if (columnIndex === 1) {
// 获取当前列的字段名
const field = this.columns[columnIndex].field
// 如果是第一行,从这一行开始统计
if (rowIndex === 0) {
let count = 1 // 记录相同值的数量
// 向下查找相同值的行数
for (let i = 1; i < rows.length; i++) {
if (rows[i][field] === row[field]) {
count++
} else {
break
}
}
// 返回要合并的行数
return {
rowspan: count,
colspan: 1
}
} else {
// 检查当前行的值是否与上一行相同
const prevRow = rows[rowIndex - 1]
if (prevRow && row[field] === prevRow[field]) {
// 如果与上一行相同,则不显示
return {
rowspan: 0,
colspan: 0
}
}
// 如果与上一行不同,需要计算向下合并的行数
let count = 1
for (let i = rowIndex + 1; i < rows.length; i++) {
if (rows[i][field] === row[field]) {
count++
} else {
break
}
}
return {
rowspan: count,
colspan: 1
}
}
}
}