CLIR InEA DataTable字母数字列排序异常及解决方案咨询

核心思路 #

不要全局替换表格的默认排序函数，而是仅为stakes列单独配置自定义字母数字排序规则，其他列沿用组件原生排序逻辑。

具体实现步骤 #

1. 编写字母数字排序算法 #

利用原生API实现自然排序逻辑，正确处理数字与字母混合的字符串排序（比如让"10"排在"2"之后）：

function alphanumericSort(a, b, ascending = true) {
  const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
  let result = collator.compare(a, b);
  return ascending ? result : -result;
}

该方法借助Intl.Collator的numeric: true参数，自动适配字母数字混合场景，兼容性较好。

2. 为指定列绑定自定义排序 #

在表格的列配置中，仅给stakes列设置sortFunction属性，其他列不做配置，保留默认排序：

const columns = [
  // 其他列沿用默认排序，不配置sortFunction
  {
    key: 'name',
    label: '名称'
  },
  {
    key: 'stakes',
    label: '投注额',
    // 只为该列绑定自定义排序逻辑
    sortFunction: (a, b, order) => {
      return alphanumericSort(a.stakes, b.stakes, order === 'asc');
    }
  },
  // 其他列配置...
];

3. 特殊值处理（可选） #

如果stakes列存在空值、特殊字符，可在排序函数中前置处理，避免排序异常：

sortFunction: (a, b, order) => {
  const valA = a.stakes || '';
  const valB = b.stakes || '';
  return alphanumericSort(valA, valB, order === 'asc');
}

效果验证 #

• 点击stakes列表头，将按字母数字规则排序
• 其他列点击表头，仍使用组件原生排序逻辑，不会被覆盖

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