VueJS中为分组列表插入小计行的实现方案咨询

你已经实现了按carro字段排序列表，现在需要给每个分组插入小计行，最终生成带小计的数组用于PDF导出。以下是具体实现方案：

实现步骤 #

1. 确保列表已按carro排序（优化排序逻辑保证严谨性）
2. 遍历排序后的列表，按carro分组累加quantity和total
3. 在每个分组结束时插入小计行，最后一个分组结束后也要插入

代码实现 #

首先优化排序逻辑（更适配字符串类型的排序）：

if (val === 2) {
  this.dadosResumo.sort((a, b) => a.carro.localeCompare(b.carro));
}

然后编写生成带小计列表的方法：

generateListWithSubtotals() {
  // 复制原数组，避免修改原始数据
  const sortedItems = [...this.dadosResumo];
  const resultList = [];
  let currentGroup = null;
  let sumQuantity = 0;
  let sumTotal = 0;

  sortedItems.forEach((item, index) => {
    // 将字符串数值转为整数，避免拼接错误
    const quantity = parseInt(item.quantity, 10);
    const total = parseInt(item.total, 10);

    // 切换分组时，先插入上一组的小计
    if (item.carro !== currentGroup) {
      if (currentGroup !== null) {
        resultList.push({
          carro: 'Subtotal',
          number: '',
          quantity: sumQuantity.toString(),
          total: sumTotal.toString()
        });
      }
      // 重置当前分组的累加值
      currentGroup = item.carro;
      sumQuantity = quantity;
      sumTotal = total;
    } else {
      // 累加当前分组的数值
      sumQuantity += quantity;
      sumTotal += total;
    }

    // 添加当前数据项到结果列表
    resultList.push(item);

    // 处理最后一项，插入最后一组的小计
    if (index === sortedItems.length - 1) {
      resultList.push({
        carro: 'Subtotal',
        number: '',
        quantity: sumQuantity.toString(),
        total: sumTotal.toString()
      });
    }
  });

  // 将结果赋值给新变量，用于渲染和PDF生成
  this.dadosResumoWithSubtotals = resultList;
}

使用方式 #

在排序完成后调用该方法：

if (val === 2) {
  this.dadosResumo.sort((a, b) => a.carro.localeCompare(b.carro));
  this.generateListWithSubtotals();
}

关键说明 #

• 复制原数组：避免修改原始的dadosResumo数据，保证后续其他逻辑不受影响
• 数值转换：必须把quantity和total转为整数再累加，否则会出现字符串拼接（比如"4"+"3"="43"而非7）
• 分组切换判断：当遇到不同carro时，先插入上一组的小计，再重置累加值
• 最后一项处理：遍历到最后一个元素时，必须手动插入最后一组的小计

内容的提问来源于stack exchange，提问作者Johny Freitas