Как я могу отсортировать таблицу v-данных по умолчанию?

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 -сортировка

Answer 2

Чтобы использовать VDataTable custom-sort, необходимо связать свойство с методом локальной сортировки:

<template>
  <v-data-table ref="myTable" :customSort="myCustomSort" />
</template>

<script>
export default {
  methods: {
    myCustomSort(items, sortBy, sortDesc, locale, customSorters) {
      return items.sort(/* sorting function */)
    }
  }
}
</script>

Обратите внимание, что эта функция сортировки вызывается при инициализации и при каждом действии сортировки пользователем , Функция должна возвращать массив элементов, предпочтительно отсортированных.

В вашем случае вы можете настроить сортировку изначально (т. Е. Если сортировка не применяется, sortBy - пустой массив), а затем по умолчанию: исходная функция сортировки из Vuetify (то есть sortItems() из src/util/helpers):

import { sortItems } from 'vuetify/src/util/helpers'

export default {
  methods: {
    myCustomSort(items, sortBy, sortDesc, locale, customSorters) {
      return sortBy.length === 0
            ? items.sort((a, b) => a.name.localeCompare(b.name, locale)) // sort alphabetically by name
            : sortItems.apply(this.$refs.myTable, arguments); // call original sort
    }
  }
}

Answer 3

Я обычно сортирую 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>