Vuetify3中v-data-table自定义排序函数无法生效问题

问题根源 #

Vuetify3 中v-data-table的表头自定义排序函数参数逻辑和 Vuetify2 不同，你当前的写法是 Vuetify2 的格式（直接接收字段值），导致函数无法被触发，默认排序逻辑仍生效。

解决步骤 #

Vuetify3 里表头的sort函数接收两个完整的行数据对象，需要从对象中提取目标字段后再处理排序逻辑，同时要处理字段为null/undefined的异常情况：

修改后的headers配置代码：

const headers = ref([
  { 
    key: "PersonID", 
    title: "EDB Person ID", 
    sortable:true 
  }, 
  { 
    key: "FirstName", 
    title: "Name", 
    sortable:true 
  },
  { 
    key: "PersonPersonTimekeeperMaps", 
    title: "Timekeeper ID", 
    sortable:false 
  },
  { 
    key: "Created", 
    title: "Created", 
    sortable:true, 
    sort: (item1, item2) => {
      // 处理空值，将空数据排至末尾
      if (!item1.Created && !item2.Created) return 0;
      if (!item1.Created) return 1;
      if (!item2.Created) return -1;

      const date1 = new Date(item1.Created);
      const date2 = new Date(item2.Created);
      // 降序排序（新日期在前），如需升序则改为 date1.getTime() - date2.getTime()
      return date2.getTime() - date1.getTime();
    } 
  }
]);

验证 #

修改后点击Created列的排序按钮，自定义函数的断点会正常触发，排序逻辑也会按照设置执行。

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