默认情况下如何对 v-data-table 进行排序？

Question

我似乎无法让默认排序工作。对于文档中的论点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只是一个调用库的函数，并不太重要。只是该列的输出不直接在对象中。

Answer 1

将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

Answer 2

如果使用 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 数组中指定的键