Angular复用app-table-multi-sort按dealType生成多独立表格实现方案问询

实现思路 #

第一步：调整ts文件逻辑 #

1. 新增3个状态变量，替换原有单表格的相关配置：

// 按dealType分组后的表格数据
dealTypeGroupedData: Record<string, any[]> = {}
// 不同dealType对应的tableOptions，可按需配置不同列、操作项
dealTypeTableOptions: Record<string, any> = {
  'A': { /* dealType为A对应的专属表格配置 */ },
  'B': { /* dealType为B对应的专属表格配置 */ }
}
// 多表格实例引用，替代原有单实例@ViewChild
@ViewChildren(TableMultiSortComponent) tableComps!: QueryList<TableMultiSortComponent>

2. 修改_pageEventDealsList接口返回的处理逻辑，把原始数据按dealType字段分组：

next: (res) => {
  this.table.totalItemCount = res.totalItemCount;
  this.table.lastItemOnPage = res.lastItemOnPage;
  this.table.totalElements = res.totalItemCount;
  // 新增分组逻辑
  this.dealTypeGroupedData = res.items.reduce((groups, item) => {
    const type = item.dealType
    if (!groups[type]) groups[type] = []
    groups[type].push(item)
    return groups
  }, {})
},

第二步：调整html模板，用循环渲染多个表格 #

直接用*ngFor遍历分组后的数据，复用同一个组件标签，不需要重复编写组件调用代码：

<ng-container *ngFor="let group of dealTypeGroupedData | keyvalue">
  <!-- 可选：新增标题区分不同类型的表格 -->
  <h3>{{ group.key }} 类型交易</h3>
  <app-table-multi-sort 
    (dataServiceEvent)="dataServiceEvent($event, group.key)" 
    [tableOptions]="dealTypeTableOptions[group.key]" 
    [tableData]="group.value"
    (tableActionsEvent)="tableActions($event, group.key)" 
    (editRowEvent)="editDeal($event)"
  ></app-table-multi-sort>
</ng-container>

可选适配：多表格独立分页/排序处理 #

如果需要每个表格独立走后端分页，只需修改dataServiceEvent方法，接收第二个参数dealType，把不同类型的分页、排序参数分开存储，请求接口的时候携带对应参数即可。

内容的提问来源于stack exchange，提问作者Brinda Anand