Angular12中p-table无法正确排序带点版本号问题求助

根因说明 #

p-table默认采用字符串字典序做排序计算：

• 当版本号主版本（V后第一位数字）不同时，字典序恰好和版本号实际大小逻辑一致，因此看起来排序正常
• 当主版本号完全相同时，次版本号的逐字符字典序比对不符合数值比对逻辑（比如V1.10会被排在V1.2前面），导致排序失效

解决方案 #

通过p-table提供的sortFunction自定义排序规则，覆盖默认的字符串排序逻辑即可。

步骤1：组件中编写版本号排序函数 #

在业务组件的ts文件中添加如下方法：

/**
 * 自定义版本号排序方法
 * @param versionA 待比对版本号A
 * @param versionB 待比对版本号B
 * @return 排序权重值
 */
sortVersion(versionA: string, versionB: string): number {
  // 兼容大小写V开头，移除前缀后拆分版本段转为数字
  const vNumA = versionA.toLowerCase().replace('v', '').split('.').map(Number);
  const vNumB = versionB.toLowerCase().replace('v', '').split('.').map(Number);

  const maxLength = Math.max(vNumA.length, vNumB.length);
  for (let i = 0; i < maxLength; i++) {
    // 缺位补0，适配长短不一致的版本号（比如V2和V2.0视为相同版本）
    const segA = vNumA[i] || 0;
    const segB = vNumB[i] || 0;
    if (segA !== segB) {
      return segA - segB;
    }
  }
  return 0;
}

步骤2：模板中绑定自定义排序函数 #

在p-table的版本号列，将自定义方法绑定到sortFunction属性：

<p-table [value]="dataList" sortMode="single">
  <ng-template pTemplate="header">
    <tr>
      <!-- 其他业务列 -->
      <th pSortableColumn="version" [sortFunction]="sortVersion">
        版本号 <p-sortIcon field="version"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <!-- 其他业务列单元格 -->
      <td>{{item.version}}</td>
    </tr>
  </ng-template>
</p-table>

注意事项 #

• 如果你的版本号包含预发布后缀（如V1.3.0-alpha.2），可在拆分版本段前额外增加后缀权重判断逻辑，上述代码仅适配纯数字段的版本号场景
• 若使用p-table的懒加载排序模式，需要将相同的版本号比对逻辑迁移到后端接口，排序完成后再返回数据

内容的提问来源于stack exchange，提问作者99Coder