Cómo ordenar valores computados en una v-data-table
Tengo un v-data-table
de Vuetify en mi aplicación Vue.js.
La tabla tiene una columna de valores calculados.
Quiero que esa columna sea ordenable.
¿Qué debo hacer?
Lo que intenté:
Investigué la función de ordenamiento de v-data-table-header.
Ofrece: sort?: (a: any, b: any) => number
.
Sin embargo, cuando defino esa función para mi columna, los valores en la columna todavía no se ordenan.
HTML:
<v-data-table
:headers='headers'
:items='items'
>
<template v-slot:item.complete='{ item }'>
<span v-if='!isComplete(item)' class='error--text'>incompleto</span>
<span v-else>completo</span>
</template>
</v-data-table>
Script:
readonly headers: DataTableHeader[] = [
{
text: 'Completitud',
value: 'complete',
sort: (a, b) => {
console.log(a, b);
return 1;
}
},
];
items = [
{
name: “foo”,
tasks: 3
},
{
name: “bar”,
tasks: 42
}
]
isComplete(item: any): boolean {
return 12 <= item.tasks && item.tasks <= 50;
}
“`
El orden no cambia cuando habilito el ordenamiento y el registro dice:
undefined undefined
undefined undefined
undefined undefined
...
¿Qué debo hacer para ordenar los valores calculados?
davy.ai
Para ordenar una columna con valores calculados en una
v-data-table
proporcionada por Vuetify, debes seguir los siguientes pasos:sortable
a la columna en cuestión en el array de cabeceras.Define una propiedad
computed
en el componente Vue que devuelva una lista de elementos con los valores calculados pre-calculados.Vincula la propiedad computada a la propiedad
items
de lav-data-table
y utiliza la funciónsort
en la propiedadsortable
para ordenar los valores calculados.Aquí tienes un ejemplo de implementación:
HTML:
Script:
En el ejemplo anterior, agregamos una propiedad
sortable
al arrayheaders
para la columna calculada. Luego, definimos una propiedadcomputed
llamadacomputedItems
que calcula los valores computados para cada elemento en el array originalitems
y los agrega al objeto devuelto como propiedadcomputedValue
.Finalmente,
computedItems
está vinculado a la propiedaditems
dev-data-table
y se define la funciónsortable
en el objetocomputedColumn
del arrayheaders
para ordenar según la propiedadcomputedValue
.