Vue数据表排序不能正常工作答案

【问题标题】：Vue data table sort doesn't work correctlyVue数据表排序不能正常工作
【发布时间】：2022-01-14 04:58:59
【问题描述】：

我有这个v-data-table：

  <v-data-table :headers="walletInHeaders" :items="filteredByQuantityIncome" class="elevation-1">
    <template v-slot:items="props">
      <td class="pa-1 text-xs-center">
        <v-btn @click="loginAsClient(props.item.email)" color="blue">Login as client</v-btn>
        {{ props.item.email }}
      </td>
      <td class="pa-1 text-xs-center">{{ props.item.currency }}</td>
      <td class="pa-1 text-xs-center">{{ props.item.quantity }}</td>
      <td class="pa-1 text-xs-center">{{ props.item.totalIncomeAmount.toFixed(8) }}</td>
      <td class="pa-1 text-xs-center" style="white-space: pre-line">{{ props.item.types }}</td>
    </template>
  </v-data-table>

和标题：

  walletInHeaders: [
    {text: 'Email (click on email to log in as client)', value: 'email', align: 'center', class: 'px-0', sortable: false},
    {text: 'Currency', value: 'curr', align: 'center', class: 'px-0', sortable: false},
    {text: 'Quantity', value: 'quan', align: 'center', class: 'px-0'},
    {text: 'Total income amount', value: 'totalIncomeAmount', align: 'center', class: 'px-0', sortable: false},
    {text: 'Payment methods', value: 'mostPopularPaymentMethod', align: 'center', class: 'px-0', sortable: false},
  ],

如您所见，有一个恶魔quantity（代码中的整数），我想使用此列进行表格排序。默认情况下，它根本无法正常工作。不是quantity 字段，不是其他字段。

我写道，这是代码中的整数列。另外，我试图在桌子上使用sortable: false 和其他列:sort-by="['quan]" :sort-desc="true"，但它仍然不起作用。

【问题讨论】：

标签： javascript vue.js vuetify.js v-data-table

【解决方案1】：

其实我应该注意标题中的value属性。如您所见，在HTML 中，例如props.item.currency，但在标题{text: 'Currency', value: 'curr', align: 'center', class: 'px-0', sortable: false} 中。所以，我只需将curr 的值更改为currency，就像对象的属性名称一样。我为每个属性都做了这个，现在它可以工作了。

【讨论】：

【解决方案2】：

sort-by 和 sort-order 字段分别是字符串和布尔值。只有当multi-sort 为真时，它们才是数组。

如果禁用了多排序：尝试使用sort-by="quan" 而不是:sort-by="['quan']"。

如果启用了多重排序：尝试使用:sort-desc=[true] 而不是:sort-desc="true"。

【讨论】：