nz-table 前端排序实现指南：使用 nzSortFn 自定义排序函数

在 nz-table 中实现前端排序，可以使用 'nzSortFn' 属性来定义自定义排序函数。

首先，你需要在 'nz-table-column' 标签中定义 'nzSortFn' 属性，指定一个自定义的排序函数。例如，你可以将该函数命名为 'customSortFn'。

然后，在定义自定义排序函数时，你需要传入两个参数，分别为 'a' 和 'b'，这两个参数是用来进行比较的两个数据项。

接下来，你需要在自定义排序函数中实现你的排序逻辑。你可以使用 JavaScript 的比较运算符（如 '>', '<', '>=', '<=') 来比较两个数据项，然后根据比较结果返回一个数字，以指示它们的顺序关系。如果返回负数，表示 'a' 在 'b' 之前；如果返回正数，表示 'a' 在 'b' 之后；如果返回 0，表示 'a' 和 'b' 的顺序相同。

最后，你需要在 'nz-table' 标签中的 'nzSortFn' 属性中指定你刚刚定义的自定义排序函数名（'customSortFn'）。

下面是一个示例代码：

<nz-table #table [nzData]="data" nzShowPagination>
  <nz-table-column nzTitle="Name" nzSortFn="customSortFn">
    <ng-template let-item>{{ item.name }}</ng-template>
  </nz-table-column>
  <nz-table-column nzTitle="Age">
    <ng-template let-item>{{ item.age }}</ng-template>
  </nz-table-column>
</nz-table>

import { Component } from '@angular/core';

@Component({
  selector: 'app-my-table',
  template: `
    <nz-table #table [nzData]="data" nzShowPagination>
      <nz-table-column nzTitle="Name" nzSortFn="customSortFn">
        <ng-template let-item>{{ item.name }}</ng-template>
      </nz-table-column>
      <nz-table-column nzTitle="Age">
        <ng-template let-item>{{ item.age }}</ng-template>
      </nz-table-column>
    </nz-table>
  `
})
export class MyTableComponent {
  data = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 },
    { name: 'Charlie', age: 20 }
  ];

  customSortFn(a: any, b: any): number {
    if (a.name < b.name) {
      return -1;
    } else if (a.name > b.name) {
      return 1;
    } else {
      return 0;
    }
  }
}

在这个示例中，我们定义了一个名为 'customSortFn' 的自定义排序函数，它通过比较两个数据项的 'name' 属性来进行排序。然后，在 'nz-table-column' 中使用 'nzSortFn' 属性指定了这个自定义排序函数。

这样，当用户点击表头的排序按钮时，就会调用 'customSortFn' 函数进行前端排序。