时间戳

首页 > 解决方案 > 使Vuetify v-data-table列按降序排序，然后按升序排序？

vue.js - 使Vuetify v-data-table列按降序排序，然后按升序排序？

问题描述

在 Vuetifyv-data-table示例中，当用户单击数据表的列标题时，该表首先按列的升序排序。第二次单击标题后，表格将按列的降序排序。

我想颠倒排序顺序：第一次单击导致按降序排序，第二次单击导致按升序排序。

有没有办法用 Vuetify 做到这一点v-data-table？

标签： vue.jsvuetify.js

解决方案

我想可能有一个更简单的解决方案，但似乎最好的答案是custom-sort使用v-data-table.

在单个文件组件的模板中：

    <v-data-table
        :headers="myHeaders"
        :items="myItems"   
        :custom-sort="customSort"
    ></v-data-table>

在单个文件组件的 JS 中：

    methods: {
      customSort(items, index, isDesc) {
        items.sort((a, b) => {
          if (isDesc != "false") {
            return a[index] < b[index] ? -1 : 1
          } else {
            return b[index] < a[index] ? -1 : 1
          }
        })
        return items
      }
    },

注意：由于这实际上翻转了“降序”/“升序”项目，您可能还需要更改默认sort图标：

    new Vuetify({
      icons: {
        values: {
          sort: 'mdi-arrow-down',
        },
      },
    })

JSFiddle

推荐阅读