英文:
Custom sort function not working in vuetify3
问题
我有一个具有设置的标题的 `v-data-table`，但是我无法使自定义排序函数起作用。
```javascript
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:(d1: string | null | undefined, d2: string | null | undefined) => {
const date1 = new Date(d1 as string);
const date2 = new Date(d2 as string);
if (date1 > date2) return -1;
if (date1 < date2) return 1;
return 0;
} }
]);
在开发工具中，它从未触发函数中的断点。并且它没有遵循我设置的逻辑。似乎它只是自行执行默认排序。
<details>
<summary>英文:</summary>
I have a `v-data-table` with headers set, but I can't get the custom sort function to work.
<v-data-table v-else :items-per-page="itemsPerPage" density="compact" :headers="headers" :items="rows" :no-data-text="t('label_no_data')" sticky class="elevation-1 text-caption" :class="{'mobile-table':IsMobile}" />
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:(d1: string | null | undefined, d2: string | null | undefined) => {
const date1 = new Date(d1 as string);
const date2 = new Date(d2 as string);
if (date1 > date2) return -1;
if (date1 < date2) return 1;
return 0;
} }
]);
It never hits the breakpoint in the function in dev tools. And it is not respecting the logic I set. It seems to just do the default sort on its own.
</details>
# 答案1
**得分**: 1
在 Vuetify 3 中，排序函数已从标题声明移至 [`:custom-key-sort`](https://vuetifyjs.com/en/api/v-data-table/#props-custom-key-sort) 属性，该属性接受将列键映射到排序函数的对象。
因此，在你的情况下，代码如下：
```javascript
const customKeySort = {
Created: (d1: string | null | undefined, d2: string | null | undefined) => {
...
}
}
以及
<v-data-table
:custom-key-sort="customKeySort"
...
/>
这里是一个片段示例：
const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
setup(){
const headers = ref([{key: 'name', title: 'Name'}, {key: 'date', title: 'Date'}])
const items = ref(Array.from({length:10}, (_,i) => ({
name: `Item ${1 + i}`,
date: new Date(new Date() - Math.random()*(1e+12)).toString()
})))
const customKeySort = {
date: (d1,d2) => new Date(d1).getTime() - new Date(d2).getTime()
}
return {headers, items, customKeySort,}
}
}
createApp(app).use(vuetify).mount('#app')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-data-table
:headers="headers"
:items="items"
item-title="name"
item-value="name"
:custom-key-sort="customKeySort"
></v-data-table>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.js"></script>
英文:
In Vuetify 3, the sort functions have moved from the header declaration to the :custom-key-sort property, which takes an object mapping column key to sort function.
So in your case, that would be:
const customKeySort = {
Created: (d1: string | null | undefined, d2: string | null | undefined) => {
...
}
}
and
<v-data-table
:custom-key-sort="customKeySort"
...
/>
Here it is in a snipet:
<!-- begin snippet: js hide: true console: false babel: false -->
<!-- language: lang-js -->
const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
setup(){
const headers = ref([{key: 'name', title: 'Name'}, {key: 'date', title: 'Date'}])
const items = ref(Array.from({length:10}, (_,i) => ({
name: `Item ${1 + i}`,
date: new Date(new Date() - Math.random()*(1e+12)).toString()
})))
const customKeySort = {
date: (d1,d2) => new Date(d1).getTime() - new Date(d2).getTime()
}
return {headers, items, customKeySort,}
}
}
createApp(app).use(vuetify).mount('#app')
<!-- language: lang-html -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
<v-app>
<v-data-table
:headers="headers"
:items="items"
item-title="name"
item-value="name"
:custom-key-sort="customKeySort"
></v-data-table>
</v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify-labs.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论