如何在Aurelia Table自定义排序中指定列名并访问aut-sort参数Key？

当然可以！而且这个方案正好适配你这种动态加载JSON数组生成表格的场景——完全不需要依赖静态数组的字段指向，就能在自定义排序函数里拿到当前点击排序列的aut-sort key，实现自定义逻辑。下面一步步给你说明：

核心实现思路 #

在动态生成表头时，通过箭头函数把当前列的aut-sort key传递给自定义排序函数，这样函数就能明确知道是基于哪一列进行排序，再结合动态加载的行数据完成自定义排序逻辑。

模板与ViewModel代码示例 #

1. 表格模板（动态生成列）

假设你已经通过JSON加载好了columns（列配置数组，每个元素包含key和label）和rows（表格数据数组），模板可以这么写：

<table aurelia-table sort.bind="currentSortState">
  <thead>
    <tr>
      <!-- 动态生成表头，将当前列的key传入自定义排序函数 -->
      <th 
        repeat.for="col of columns" 
        aut-sort="${col.key}" 
        custom.bind="(a, b) => handleCustomSort(a, b, col.key)"
      >
        ${col.label}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="row of rows">
      <td repeat.for="col of columns">${row[col.key]}</td>
    </tr>
  </tbody>
</table>

2. ViewModel中的自定义排序函数

这里可以直接拿到当前排序的列key，根据key获取行数据对应的字段值，编写你的自定义排序逻辑：

// 绑定表格当前排序状态（可选，用于处理升降序）
currentSortState = {};

handleCustomSort(a, b, sortKey) {
  // 根据排序key获取两行对应列的值
  const valueA = a[sortKey];
  const valueB = b[sortKey];

  // 示例：覆盖字符串、数字、日期的常见排序场景
  if (typeof valueA === 'string' && typeof valueB === 'string') {
    // 字符串按本地化规则排序
    return valueA.localeCompare(valueB);
  } else if (typeof valueA === 'number' && typeof valueB === 'number') {
    // 数字直接比较
    return valueA - valueB;
  } else if (valueA instanceof Date && valueB instanceof Date) {
    // 日期转时间戳比较
    return valueA.getTime() - valueB.getTime();
  }

  // 默认返回相等
  return 0;
}

3. 结合升降序调整排序结果

如果需要根据表格的升降序状态反转结果，可以利用sort.bind绑定的currentSortState对象——它会自动包含key（当前排序列的key）和direction（值为'asc'或'desc'）：

handleCustomSort(a, b, sortKey) {
  let result = 0;
  const valueA = a[sortKey];
  const valueB = b[sortKey];

  // 核心比较逻辑
  if (valueA < valueB) result = -1;
  if (valueA > valueB) result = 1;

  // 根据当前升降序反转结果
  return this.currentSortState.direction === 'desc' ? -result : result;
}

4. 动态加载JSON数据

最后适配你的动态加载场景，只需要在ViewModel里通过接口请求拿到数据，赋值给columns和rows即可：

async loadTableData() {
  // 模拟请求JSON数据
  const response = await fetch('/your-data-api');
  const tableData = await response.json();
  
  // 假设返回的JSON结构包含columns和rows字段
  this.columns = tableData.columns;
  this.rows = tableData.rows;
}

这样不管你的JSON数据结构怎么变化，只要列配置里的key和行数据的字段对应上，自定义排序就能正常工作。

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