如何在Vuetify3的v-data-table中让Null值始终排在排序末尾

要实现无论升序还是降序，Null/Undefined值都排在排序结果的最后，核心思路是给需要处理的列自定义排序比较函数，覆盖Vuetify默认的排序逻辑。

步骤1：编写通用的Null后置排序函数 #

创建一个自定义排序函数，专门处理Null值的排序优先级：

const nullLastSort = (a, b, isDescending) => {
  // 两个值都是Null，返回0表示排序权重相等
  if (a == null && b == null) return 0;
  // 其中一个是Null，强制让Null值排在后面
  if (a == null) return 1;
  if (b == null) return -1;

  // 根据数据类型执行正常排序逻辑（示例覆盖字符串和数字场景）
  if (typeof a === 'string' && typeof b === 'string') {
    return isDescending ? b.localeCompare(a) : a.localeCompare(b);
  }
  return isDescending ? b - a : a - b;
};

步骤2：在列定义中配置自定义排序 #

在v-data-table的列配置数组中，给需要处理Null值的列指定sort属性为上面的自定义函数：

<template>
  <v-data-table
    :items="items"
    :columns="columns"
    sort-by="value"
  />
</template>

<script setup>
import { ref } from 'vue';

const nullLastSort = (a, b, isDescending) => {
  if (a == null && b == null) return 0;
  if (a == null) return 1;
  if (b == null) return -1;

  if (typeof a === 'string' && typeof b === 'string') {
    return isDescending ? b.localeCompare(a) : a.localeCompare(b);
  }
  return isDescending ? b - a : a - b;
};

const columns = ref([
  { title: 'ID', key: 'id', sort: true },
  { title: '数值', key: 'value', sort: nullLastSort },
  { title: '描述', key: 'desc', sort: nullLastSort },
]);

const items = ref([
  { id: 1, value: 5, desc: '苹果' },
  { id: 2, value: null, desc: null },
  { id: 3, value: 2, desc: '香蕉' },
  { id: 4, value: 8, desc: '橙子' },
  { id: 5, value: null, desc: '葡萄' },
]);
</script>

逻辑说明 #

• 排序时只要遇到Null值，就通过返回1或-1强制将其推到排序队列末尾，不受升序/降序方向影响。
• 非Null值的排序逻辑可根据实际数据类型（如日期、对象属性）自行调整，示例中覆盖了最常用的字符串和数字场景。

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