Vuetify v-data-table带空值的格式化日期排序异常问题

问题分析 #

你在使用Vuetify的v-data-table时，通过dayjs将日期格式化为MM/DD/YYYY，但部分未完成项的日期为null。尝试自定义排序函数将null转为当日日期，使其排在最新位置，但原函数和更新后的函数都未达到预期，null始终被判定为较早日期。

原排序函数的问题

1. 存在拼写错误：MM/DD/YYY少了一个Y，导致dayjs解析日期失败，生成无效日期对象
2. 未明确Vuetify排序函数的返回值逻辑：返回负数表示a排在b前，正数表示b排在a前，原函数的diff返回方向未完全匹配需求

更新后函数的问题

当a或b为null时，new Date(null)会生成1970-01-01的时间戳，相当于系统最早日期，自然会被排在最前面，完全不符合将null视为最新日期的需求。

正确的自定义排序实现 #

我们将null直接视为当日日期，基于dayjs的时间比较逻辑实现排序，同时适配Vuetify的排序规则：

{
  title: 'Memo Date',
  key: 'memo_date',
  align: 'center',
  visible: true,
  filtered: [],
  sort: (a: string, b: string) => {
    // 把null替换为当日日期的dayjs对象，指定解析格式避免歧义
    const dateA = a ? dayjs(a, 'MM/DD/YYYY') : dayjs();
    const dateB = b ? dayjs(b, 'MM/DD/YYYY') : dayjs();
    
    // 返回时间差：dateA比dateB新则返回正数，旧则返回负数，相等返回0
    return dateA.diff(dateB);
  }
}

逻辑说明 #

1. 用dayjs(a, 'MM/DD/YYYY')明确解析格式，避免不同环境下的日期解析差异
2. 遇到null时直接用dayjs()获取当日日期对象
3. 排序行为：
   • 升序时，null（当日）会排在所有旧日期之后
   • 降序时，null会排在所有旧日期之前
   • 两个null会被视为相等，保持原有顺序

特殊需求适配（固定null在末尾） #

如果需要null始终排在列表最后，无论升降序，可修改逻辑：

sort: (a: string, b: string) => {
  if (a === null && b === null) return 0;
  if (a === null) return 1; // a排到后面
  if (b === null) return -1; // b排到后面，a在前
  
  const dateA = dayjs(a, 'MM/DD/YYYY');
  const dateB = dayjs(b, 'MM/DD/YYYY');
  return dateA.diff(dateB);
}

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