使Vuetify v-data-table列按降序排序，然后按升序排序？答案

【问题标题】：Make Vuetify v-data-table column sort first in descending order, second in ascending order?使Vuetify v-data-table列按降序排序，然后按升序排序？
【发布时间】：2020-09-01 01:22:35
【问题描述】：

In the Vuetify v-data-table examples，当用户点击数据表的列标题时，该表首先按列的升序排序。第二次单击标题后，表格将按列的降序排序。

我想颠倒排序：第一次点击降序排序，第二次点击升序排序。

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

我想可能有一个更简单的解决方案，但似乎最好的答案是使用the custom-sort prop of 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
      }
    },

注意：由于这实质上翻转了“降序”/“升序”项目，你也可以change the default sort icon：

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

JSFiddle

【讨论】：

我将采用这种方法，因为它的计算效率更高。

【解决方案2】：

我想出了另一个使用 sort-by 和 sort-desc 道具的 hack。

示例代码：

<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      @update:options="handleOptionsUpdate">
    </v-data-table>
  </v-app>
</div>

...
  handleOptionsUpdate({ sortBy, sortDesc }) {
    if (
      sortBy[0] === this.sortBy[0] &&
      sortDesc[0] === this.sortDesc[0]
    ) return

    if (sortBy[0] && sortDesc[0] === false) {
      this.sortDesc = [true]
      return
    }

    if (sortBy.length === 0 && sortDesc.length === 0) {
      this.sortBy = [this.sortBy[0]]
      this.sortDesc = [false]
      return
    }

    if (sortBy[0] && sortDesc[0] === true) {
      this.sortBy = []
      this.sortDesc = []
      return
    }
  }
...

JSFiddle

这个 hack 的一个缺点是它实际上每次点击都会排序两次。但是您也可以通过创建自己的标题槽并自行更改 sort-by 和 sort-desc 来解决此问题。

【讨论】：