1

我有这个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"上使用和，但它仍然不起作用。

4

2 回答 2

1

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

于 2021-12-10T12:53:25.503 回答
0

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

如果多排序被禁用：尝试sort-by="quan"代替:sort-by="['quan']".

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

于 2021-12-09T15:26:46.480 回答