Vuetify数据表格排序时处理null值：后置或过滤需求

方案一：让null值始终排在排序结果底部 #

在表头配置里给averageScore列添加自定义排序逻辑，利用Vuetify的customKeySort属性，根据排序方向调整null值的权重：

修改headers数组中averageScore的配置：

const headers = [
    {
        title: "Name",
        key: "name"
    },
    {
        title: "AverageScore",
        key: "averageScore",
        customKeySort: (a: number | null, b: number | null, isDesc: boolean) => {
            // 处理null值
            if (a === null && b === null) return 0;
            if (a === null) return isDesc ? -1 : 1; // 升序/降序时null都放最后
            if (b === null) return isDesc ? 1 : -1;
            // 正常数值排序
            return isDesc ? b - a : a - b;
        }
    },
];

这样不管是升序还是降序，null值都会被排在所有有数值的条目之后。

方案二：直接过滤掉含null值的条目 #

如果不需要显示null值的行，可以提前过滤数据，传给表格的是过滤后的数组：

在script里定义计算属性：

const filteredItems = computed(() => {
    return adminStore.polls.filter(item => item.averageScore !== null);
});

然后修改模板中的v-data-table：

<v-data-table
    :items="filteredItems"
    :headers="headers as any"
>
    <!-- 其他模板内容不变 -->
</v-data-table>

这样表格只会显示averageScore不为null的条目，排序时自然不会有null值干扰。

完整修改后的代码示例 #

Script部分 #

<script setup lang="ts">
import { computed } from 'vue';

const headers = [
    {
        title: "Name",
        key: "name"
    },
    {
        title: "AverageScore",
        key: "averageScore",
        // 方案一的自定义排序逻辑，不需要可删除
        customKeySort: (a: number | null, b: number | null, isDesc: boolean) => {
            if (a === null && b === null) return 0;
            if (a === null) return isDesc ? -1 : 1;
            if (b === null) return isDesc ? 1 : -1;
            return isDesc ? b - a : a - b;
        }
    },
];

// 方案二的过滤逻辑，不需要可删除
const filteredItems = computed(() => {
    return adminStore.polls.filter(item => item.averageScore !== null);
});

function getColorScore(score: number | null) {
    if (score === null) return "white";
    if (score <= 2) return "red";
    else if (score === 3) return "yellow-darken-3";
    else if (score <= 5) return "green";
}
</script>

Template部分 #

<template>
    <!-- 用方案二就用filteredItems，否则用adminStore.polls -->
    <v-data-table
        :items="filteredItems"
        :headers="headers as any"
    >
        <template #[`item.averageScore`]="{ value }">
            <v-chip class="px-5" :color="getColorScore(value)">{{ value }}</v-chip>
        </template>
    </v-data-table>
</template>

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