Vue 数据 table 排序无法正常工作

Question

我有这个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>

和headers：

  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（代码中为整数），我想使用此列进行 table 排序。默认情况下，它根本无法正常工作。不是 quantity 字段，不是其他字段。

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

Answer 1

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

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

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

Answer 2

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

Vue 数据 table 排序无法正常工作

Vue data table sort doesn't work correctly

javascript

vue.js

vuetify.js

v-data-table