如何编写单个通用排序函数实现表格按列排序，替代每列单独写函数

代码改造步骤 #

• 新增组件状态变量，用来记录当前排序字段和排序状态

// 组件类中新增两个状态属性
currentSortKey: string = ''; // 当前正在排序的列对应字段名
sortAsc: boolean = true; // 排序方向，默认升序

• 编写通用排序函数，接收列对应的字段名作为入参

sortBy(key: string) {
  // 点击同一列则翻转排序方向，切换新列默认升序
  if (this.currentSortKey === key) {
    this.sortAsc = !this.sortAsc;
  } else {
    this.currentSortKey = key;
    this.sortAsc = true;
  }

  this.tab.sort((a, b) => {
    const valueA = a[key];
    const valueB = b[key];
    let compareResult = 0;

    // 自动适配不同类型字段的排序逻辑，可根据业务需要扩展
    if (typeof valueA === 'string' && typeof valueB === 'string') {
      compareResult = valueA.localeCompare(valueB);
    } else if (typeof valueA === 'number' && typeof valueB === 'number') {
      compareResult = valueA - valueB;
    } else {
      // 其他类型统一转字符串对比
      compareResult = String(valueA).localeCompare(String(valueB));
    }

    // 根据升降序返回对应结果
    return this.sortAsc ? compareResult : -compareResult;
  });
}

• 修改模板中表头的点击绑定，传入对应列的字段名即可

<tr>
  <th (click)="sortBy('name')">Name</th>
  <!-- 新增列只需要传入对应字段即可，无需新增排序函数 -->
  <th (click)="sortBy('age')">Age</th>
  <th (click)="sortBy('email')">Email</th>
  ...
</tr>

注意事项 #

你原示例中的排序函数else分支存在多余的闭合大括号，实际运行会触发语法错误，使用前需要先清理冗余代码。

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