在 Vuetify 数据表中排序时省略项目

Question

我想在对数据表的

averageScore

列进行排序时过滤掉空值。 目前，在对

averageScore

列进行排序时，空值被视为最低值，因此在升序排序时它们位于顶部。当该列上的排序处于活动状态时，我希望它们始终位于底部。如果我可以在排序时过滤掉它们，那就更好了。

这是代码的简化版本：

<script setup lang="ts">

const headers = [
    {
        title: "Name",
        key: "name"
    },
    {
        title: "AverageScore",
        key: "averageScore"
    },
];

const items = [
    { name: "Item1", averageScore: 5 },
    { name: "Item2", averageScore: 4 },
    { name: "Item3", averageScore: 3 },
    { name: "Item4", averageScore: 1 },
    { name: "Item5", averageScore: null }
];


function getColorScore(score: number) {
    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>
    <v-data-table
        :items="adminStore.polls"
        :headers="headers as any"
    >
        
        <template #[`item.averageScore`]="{ value }">
            <v-chip class="px-5" :color="getColorScore(value)">{{ value }}</v-chip>
        </template>
        
    </v-data-table>
</template>

我已经尝试过

custom-key-sort

但无法让它工作，我也尝试过

custom-sort

但它似乎已被弃用（我认为）。标头中的

sort

属性似乎有效，但我无法根据排序是升序还是降序来更改行为。

Answer 1

看看这个：游乐场

可以通过添加flag来检查数据表是否启用了sortBy

sortByActivated

<v-data-table
    :items="filteredItems"
    :headers="headers"
    @update:options="onOptionsUpdate"
  >
...

onOptionsUpdate(options) {
  this.sortByActivated = options.sortBy?.length > 0
}, 

并用过滤后的项目替换项目：

computed: {
  filteredItems() {
    if (!this.sortByActivated) {
      return this.items
    }
    return this.items.filter(item => item.averageScore !== null)
  },
},