Angular PrimeNG p-table 如何为指定列实现多值自定义排序

PrimeNG 开启表格级自定义排序后，不会影响其他列的默认排序逻辑，只需要单独对状态列做规则处理即可，实现步骤如下： #

1. 调整表格模板配置 #

给p-table标签加上自定义排序的两个属性绑定，其他原有模板（colgroup、表头、表体内容）完全不需要修改：

<p-table #orderTable [value]="orderData"
       [rowHover]="true"
       [rows]="5"
       [scrollable]="true"
       [filterDelay]="0"
       [globalFilterFields]="['notification','action']"
       [customSort]="true"
       (sortFunction)="customSort($event)"
       class="borderless">

  <!-- 下方你原有的colgroup、header、body模板代码保持不变即可 -->

你之前写的状态列表头配置不需要改动，原有pSortableColumn="status"和排序图标会正常工作：

<th pSortableColumn="status">Status<p-sortIcon field="status"></p-sortIcon></th>

2. 编写组件侧排序逻辑 #

在对应组件的TS文件中引入SortEvent类型，实现自定义排序方法，通过权重映射实现High/Medium/Low的优先级排序：

import { SortEvent } from 'primeng/api';

// 写在组件类内部
customSort(event: SortEvent) {
  // 定义状态权重：数值越小排序越靠前，按High>Medium>Low优先级配置
  const statusWeightMap = {
    High: 0,
    Medium: 1,
    Low: 2
  };

  event.data.sort((rowA, rowB) => {
    const valA = rowA[event.field];
    const valB = rowB[event.field];
    let compareResult = 0;

    // 非状态列走默认排序逻辑，和原生排序行为一致
    if (event.field !== 'status') {
      if (valA === null && valB !== null) compareResult = -1;
      else if (valA !== null && valB === null) compareResult = 1;
      else if (valA === null && valB === null) compareResult = 0;
      else if (typeof valA === 'string' && typeof valB === 'string') {
        compareResult = valA.localeCompare(valB);
      } else {
        compareResult = valA < valB ? -1 : valA > valB ? 1 : 0;
      }
    } else {
      // 状态列按权重比较，未知状态统一排到最后
      const weightA = statusWeightMap[valA] ?? 999;
      const weightB = statusWeightMap[valB] ?? 999;
      compareResult = weightA - weightB;
    }

    // 根据当前正序/倒序状态返回结果
    return event.order * compareResult;
  });
}

注意事项 #

• 开启自定义排序后，notification、action两列的原有排序行为和原生逻辑完全一致，不会被改动
• 点击状态列排序时，升序会按High→Medium→Low排列，降序会按Low→Medium→High排列，符合常规交互逻辑
• 如果后续需要调整优先级、新增状态枚举，直接修改statusWeightMap的权重映射即可，不需要改动模板代码
• 代码加了空值、未知状态的兜底处理，不会因为异常数据导致排序报错

内容的提问来源于stack exchange，提问作者C.Das