sorting - 如何使用vuetify的自定义排序？

Question

我想使用 custom-sort在我的数据表中。我的目标是对表格进行 DESC 排序，而不是默认的 ASC。但我不知道怎么做。

这是我的数据表组件的开始:

  <v-data-table
  :headers="headers"
  :items="acts"
  hide-actions
  class="elevation-1"
  >
  <template slot="items" slot-scope="props">

    <td>{{ props.item.id }}</td>
    <td>{{ props.item.name }}</td>
    <td class="text-xs-center">{{ props.item.provider.id }}</td>
    <td class="text-xs-center">{{ props.item.category.name }}</td>
    <td class="text-xs-center">{{ props.item.budget }}</td>
    <td class="text-xs-center">{{ props.item.location.name }}</td>
    <td class="text-xs-center">{{ props.item.deets }}</td>
    <td class="text-xs-center">{{ props.item.keeping_it_100 }}</td>
    <td class="text-xs-center"><img width="50" height="50" :src="props.item.inspiration.inspiration"></td>
    <td class="justify-center layout px-0">....

这是我正在使用的脚本:

<script>
  export default {
    data () {
      return {

        dialog: false,
        customerSort: {
          isDescending: true,// I tried this? as the kabab format throws an error
        },
        headers: [
            { text: 'ID', value: 'id'},
            { text: 'Name', value: 'name' },  
            { text: 'Provider', value: 'provider' },
            { text: 'Category', value: 'category' },
            { text: 'Budget', value: 'budget' },
            { text: 'Country', value: 'location', sortable: true },
            { text: 'Keeping it 100%', value: 'keeping_it_100', sortable: false },
            { text: 'deets', value: 'deets', sortable: false },
            { text: 'inspiration', value: 'inspiration', sortable: false },
            { text: 'Cover', value: 'cover', sortable: false },
            { text: 'Actions', value: 'actions', sortable: false }
        ],

根据文档，它是一个函数属性。但是我还没有找到关于如何通过它的示例。

This is a screenshot of the function...

Answer 1

你可以使用这样的函数-

customSort(items, index, isDesc) {
  items.sort((a, b) => {
    if (index === "date") {
      if (!isDesc) {
        return compare(a.date, b.date);
      } else {
        return compare(b.date, a.date);
      }
    }
  });
  return items;
}

compare 是比较 a.date 和 b.date 的函数，返回 1 或 -1

isDesc 是一个由表传递的变量，它告诉用户想要以什么顺序对其进行排序。如果你想按 desc 排序，只需在 if-else 条件中使用 !isDesc

要在您的模板中使用它，只需使用

<v-data-table
  :headers="headers"
  :items="Data"
  :custom-sort="customSort"
>
  <template slot="items" slot-scope="props">
    <td class="font-weight-black">{{ props.item.date }}</td>
    <td class="text-xs-right">{{ props.item.time }}</td>
    <td class="text-xs-right">{{ props.item.name }}</td>
  </template>
</v-data-table>

要确保您的其他字段仍然可以使用正常的排序方式使用

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