如何在Primeng Table的rowGroupMode=rowspan模式下保留原始数据顺序

当使用PrimeNG Table的rowGroupMode="rowspan"并设置groupRowsBy="name"时，组件会强制按name字段排序，打乱原始数据的展示顺序。需求是保留数据原始顺序，仅合并连续相同的name项（如示例中index为3和4的Charlie）。

解决方案 #

PrimeNG原生的rowGroup功能默认会对数据进行分组排序，无法直接禁用该行为。因此我们可以手动实现连续项合并逻辑，步骤如下：

1. 预处理数据，计算合并属性

在组件中遍历原始数据，为每个数据项添加showName（控制是否显示name单元格）和rowspanValue（单元格的合并行数）两个属性：

// 组件中的处理方法
processDataForRowspan() {
  if (!this.data?.length) return;

  let currentName = this.data[0].name;
  let consecutiveCount = 1;

  // 从后往前遍历，设置每个项的显示状态和合并行数
  for (let i = this.data.length - 2; i >= 0; i--) {
    if (this.data[i].name === this.data[i + 1].name) {
      consecutiveCount++;
      this.data[i + 1].showName = false;
    } else {
      this.data[i + 1].rowspanValue = consecutiveCount;
      currentName = this.data[i].name;
      consecutiveCount = 1;
    }
  }
  // 处理第一个数据项
  this.data[0].rowspanValue = consecutiveCount;
  this.data[0].showName = true;
}

// 在数据加载完成后调用（比如ngOnInit或异步数据回调中）
ngOnInit() {
  this.processDataForRowspan();
}

2. 修改模板，使用自定义合并逻辑

移除原生的groupRowsBy和rowGroupMode属性，根据预处理后的showName和rowspanValue来控制单元格的显示与合并：

<p-table 
  [value]="data" 
  sortField="index" 
  sortMode="single" >
    <ng-template pTemplate="header">
        <tr>
            <th>Name</th>
            <th>index</th>
            <th>city</th>
        </tr>
    </ng-template>
    <ng-template 
        pTemplate="body" 
        let-customer>
            <tr>
                <td *ngIf="customer.showName" [attr.rowspan]="customer.rowspanValue">
                    {{customer.name}}
                </td>
                <td>{{customer.index}}</td>
                <td>{{customer.city}}</td>
            </tr>
    </ng-template>
</p-table>

3. 注意事项

• 如果数据是异步获取的，确保在数据加载完成后再调用processDataForRowspan方法；
• 若数据后续有更新，需要重新调用processDataForRowspan来更新合并属性。

内容的提问来源于stack exchange，提问作者Wave gold