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">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>Y encabezados:
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}, ], Como puede ver, hay una quantity de demonio (es un número entero en el código), y quiero ordenar la tabla usando esta columna. Por defecto no funciona correctamente en absoluto. No campo de quantity , no otros.
Escribí que esta es una columna entera en el código. Además, estaba tratando de usar sortable: false y en otras columnas :sort-by="['quan]" :sort-desc="true" en la tabla, pero aún no funciona.
En realidad, debería prestar atención a la propiedad de value en los encabezados. Como puede ver, en HTML tengo, por ejemplo, props.item.currency , pero en encabezados {text: 'Currency', value: 'curr', align: 'center', class: 'px-0', sortable: false} . Entonces, solo cambio el valor curr a currency , al igual que el nombre de las propiedades del objeto. Lo hice para cada propiedad y ahora funciona.
los campos sort-by y sort-order son String y Boolean respectivamente. Son Arrays solo si multi-sort es verdadero.
Si la ordenación múltiple está deshabilitada: prueba sort-by="quan" en lugar de :sort-by="['quan']" .
Si la ordenación múltiple está habilitada: pruebe :sort-desc=[true] en lugar de :sort-desc="true" .