Vue 项目中用于表格单元格合并的逻辑

Vue项目表格单元格合并逻辑

Vue 项目中用于表格单元格合并的逻辑

注意事项:要排序

1. 初始化变量与获取表格实例

let that = this;
const $table = this.$refs.table.$refs.table; // 获取表格底层实例(可能是基于Element UI等组件库的表格)
const { fullColumn, tableColumn } = $table.getTableColumn(); // 获取表格列配置(列的标题、索引等信息)
  1. 定义需要合并的列
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
});
  1. 遍历行数据,计算需要合并的单元格范围
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,进入下一行
});
  1. 处理最后一段连续相同的行
// 遍历结束后,检查是否有最后一段未处理的连续相同行
if (rowstart >= 0) {
  spancols.forEach((colindex) => {
    mcells.push({
      row: rowstart,
      col: colindex,
      rowspan: rowcount,
      colspan: 1,
    });
  });
  rowstart = -1;
  rowcount = 0;
}
  1. 保存合并配置
this.mergeCells = mcells; // 将合并单元格的配置赋值给组件的mergeCells属性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值