我似乎无法让默认排序工作。对于
文档中的参数
custom-sort
,我所能看到的只是它是一个“用于对项目进行排序的函数”,但我不知道以什么方式。我能想象很多。是否要求进行初始排序?它似乎返回了一个项目列表,但是当我尝试创建一个项目时,我收到一条错误消息:this.customSort is not a function
。
<template>
<v-data-table
:headers="headers"
:items="reports"
hide-default-footer>
<template v-slot:item.requested="{ item }">
{{ datetimeToDistance(item.requested) }}
</template>
</v-data-table>
</template>
<script>
export default {
name: 'Reports',
data () {
return {
customSort: (items,index,isDesc) => console.log("never called"),
reports: [{name:"a",requested:"2020-01-01T00:00:00Z"}.{name:"b",requested:"2020-02-02T00:00:00"}],
}
},
computed: {
headers () {
return [
{text: "Name", value: "name"},
{text: "Report Type", value: "report_type"},
{text: "Requested", value: "requested", sort: (a,b) => a.localeCompare(b) },
];
},
}
}
</script>
如果您点击链接,我的排序就会起作用。我真正想说的是:“当页面第一次加载时,按‘请求’排序,就像用户最初单击该页面一样。然后让他们更改顺序。”
注意:
datetimeToDistance
只是一个调用库的函数,并不是太重要。只是该列的输出并不直接在对象中。
将
sort-by
和 sort-desc
属性与 .sync
选项结合使用,并在数据中设置所需的值。
<template>
<div>
<v-data-table
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
></v-data-table>
</div>
</template>
<script>
export default {
data () {
return {
sortBy: 'fat',
sortDesc: false,
},
}
</script>
https://vuetifyjs.com/en/components/data-tables/#external-sorting
如果使用 Vuetify 3.xx
<template>
<div>
<v-data-table
v-model:sort-by="sortBy"
></v-data-table>
</div>
</template>
<script>
export default {
data () {
return {
sortBy: [{ key: 'key', order:'asc'}],
},
}
</script>
'key' 应该是您在 headers 数组中指定的键
我通常在分页指令中对 v-datatable 进行排序,如下所示:
<template>
<v-data-table :headers="headers" :items="reports" :pagination.sync="pagination" hide-default-footer>
<template v-slot:item.requested="{ item }">
{{ datetimeToDistance(item.requested) }}
</template>
</v-data-table>
</template>
<script>
export default {
name: 'Reports',
data() {
return {
customSort: (items, index, isDesc) => console.log("never called"),
reports: [{ name: "a", requested: "2020-01-01T00:00:00Z" }.{ name: "b", requested: "2020-02-02T00:00:00" }],
pagination: { sortBy: 'requested', descending: true, rowsPerPage: 10 }
}
},
computed: {
headers() {
return [
{ text: "Name", value: "name" },
{ text: "Report Type", value: "report_type" },
{ text: "Requested", value: "requested", sort: (a, b) => a.localeCompare(b) },
];
},
}
}
</script>
这也有效,我就是这样做的:
<v-data-table
:headers="headersItems"
:items="items"
:no-data-text="noData"
:no-results-text="noResults"
:sort-desc="true"
sort-by="timestamp"
>