La clasificación de la tabla de datos de Vue no funciona correctamente.
Tengo esta 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">Iniciar sesión como cliente</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>
Y los encabezados:
walletInHeaders: [
{text: 'Email (haga clic en el correo electrónico para iniciar sesión como cliente)', value: 'email', align: 'center', class: 'px-0', sortable: false},
{text: 'Moneda', value: 'curr', align: 'center', class: 'px-0', sortable: false},
{text: 'Cantidad', value: 'quan', align: 'center', class: 'px-0'},
{text: 'Monto total de ingresos', value: 'totalIncomeAmount', align: 'center', class: 'px-0', sortable: false},
{text: 'Métodos de pago', value: 'mostPopularPaymentMethod', align: 'center', class: 'px-0', sortable: false},
],
Como puedes ver, hay un campo llamado quantity
(es un número entero en el código), y quiero que la tabla se ordene usando esta columna. Por defecto, no funciona correctamente en absoluto. Ni el campo quantity
, ni otros.
Indiqué que esta es una columna de números enteros en el código. También intenté utilizar sortable: false
y en otras columnas :sort-by="['quan']" :sort-desc="true"
en la tabla, pero aún no funciona.
davy.ai
Para hacer que el campo
quantity
sea ordenable en elv-data-table
, debes establecer el atributosortable
entrue
para esa columna en el arraywalletInHeaders
:Luego, en tu componente
v-data-table
, puedes agregar:sort-by="'quantity'"
para ordenar la tabla por la columnaquantity
:Asegúrate de eliminar
sortable: false
de la columnaquantity
en el arraywalletInHeaders
, ya que eso desactivará la ordenación para esa columna. Además, asegúrate de que el campoquantity
en tu arrayfilteredByQuantityIncome
sea de tiponumber
(entero o decimal), ya que la ordenación no funcionará correctamente en valores de tipo texto que contengan números.