排序表格数据时如何将null值置于末尾？

核心处理逻辑 #

在排序的比较函数里，优先判断null值的情况，确保所有null项都排在非null项之后；非null值再按照需求的升/降序规则排序。

具体实现代码 #

升序排序（非null值按自然顺序排列，null在末尾） #

this.List.sort((a, b) => {
  const valA = a[columnname];
  const valB = b[columnname];
  
  // 优先处理null情况
  if (valA === null && valB !== null) return 1; // a是null，放到后面
  if (valA !== null && valB === null) return -1; // b是null，a排在前面
  if (valA === null && valB === null) return 0; // 都是null，保持原顺序
  
  // 非null值按自然升序比较
  return valA.localeCompare(valB);
});

降序排序（非null值按逆自然顺序排列，null在末尾） #

this.List.sort((a, b) => {
  const valA = a[columnname];
  const valB = b[columnname];
  
  // 优先处理null情况
  if (valA === null && valB !== null) return 1; // a是null，放到后面
  if (valA !== null && valB === null) return -1; // b是null，a排在前面
  if (valA === null && valB === null) return 0; // 都是null，保持原顺序
  
  // 非null值按自然降序比较
  return valB.localeCompare(valA);
});

代码说明 #

• 用localeCompare替代原始的</>字符串比较，更符合多语言排序规则，同时纠正了你原有代码中排序逻辑反转的问题（原升序写法实际是降序，降序写法实际是升序）。
• 先拦截null值的判断，确保无论升序还是降序，null都只会出现在排序结果的最后。

用你的测试数据验证：

• 升序排序结果：Completed → In Progress → Pending → Pending → null → null
• 降序排序结果：Pending → Pending → In Progress → Completed → null → null

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