Vue 项目中用于表格单元格合并的逻辑
注意事项:要排序
1. 初始化变量与获取表格实例
let that = this;
const $table = this.$refs.table.$refs.table; // 获取表格底层实例(可能是基于Element UI等组件库的表格)
const { fullColumn, tableColumn } = $table.getTableColumn(); // 获取表格列配置(列的标题、索引等信息)
- 定义需要合并的列
let mergecol = ["客户名称"]; // 需要合并的列的标题(这里只合并“客户名称”列)
let spancols = []; // 存储需要合并的列在表格列配置中的索引
// 遍历mergecol,找到“客户名称”列在tableColumn中的索引,存入spancols
mergecol.forEach((mer) => {
let ind = tableColumn.findIndex((x) => x.title == mer); // 查找标题为“客户名称”的列的索引
if (ind >= 0) spancols.push(ind); // 找到则存入spancols
});
- 遍历行数据,计算需要合并的单元格范围
let Companyname = 0; // 用于记录上一行的客户名称(FirmName)
let mcells = []; // 存储合并单元格的配置(最终结果)
let rindex = 0; // 当前行的索引(从0开始)
let rowstart = -1; // 合并单元格的起始行索引(初始为-1表示未开始合并)
let rowcount = 0; // 连续相同客户名称的行数(合并的行数)
// 遍历表格的每一行数据(rowData是表格的行数据数组)
that.$refs.table.rowData.forEach((row) => {
if (Companyname == 0) {
// 第一行数据:初始化客户名称为当前行的FirmName
Companyname = row.FirmName;
} else {
if (Companyname == row.FirmName) {
// 当前行客户名称与上一行相同:记录合并范围
if (rowstart == -1) {
// 首次发现连续相同:起始行设为上一行索引(rindex-1),合并行数初始为2(当前行+上一行)
rowstart = rindex - 1;
rowcount = 2;
} else {
// 非首次:合并行数+1
rowcount = rowcount + 1;
}
} else {
// 当前行客户名称与上一行不同:结束上一段合并,记录合并配置
if (rowstart >= 0) {
// 遍历需要合并的列(这里只有“客户名称”列),生成合并配置
spancols.forEach((colindex) => {
mcells.push({
row: rowstart, // 合并的起始行
col: colindex, // 合并的列(“客户名称”列的索引)
rowspan: rowcount, // 合并的行数
colspan: 1, // 列不合并(只合并行)
});
});
// 重置合并状态,准备下一段合并
rowstart = -1;
rowcount = 0;
}
// 更新客户名称为当前行的FirmName
Companyname = row.FirmName;
}
}
rindex = rindex + 1; // 行索引+1,进入下一行
});
- 处理最后一段连续相同的行
// 遍历结束后,检查是否有最后一段未处理的连续相同行
if (rowstart >= 0) {
spancols.forEach((colindex) => {
mcells.push({
row: rowstart,
col: colindex,
rowspan: rowcount,
colspan: 1,
});
});
rowstart = -1;
rowcount = 0;
}
- 保存合并配置
this.mergeCells = mcells; // 将合并单元格的配置赋值给组件的mergeCells属性