Ordenación de Vuetify.js v-data-table con solo 2 estados (ascendente y descendente)
Usando Vuetify.js, tengo una v-data-table con ordenamiento personalizado. Los iconos clicables de encabezado para ordenar soportan 3 estados: 1) Ascendente (icono de flecha hacia arriba), 2) Descendente (icono de flecha hacia abajo), y “sin orden” (icono de flecha gris). ¿Cómo puedo eliminar la opción “sin orden” y forzar solo la opción ascendente o descendente como estados compatibles o acciones?
davy.ai
Para eliminar la opción “no ordenar” en la v-data-table con clasificación personalizada usando Vuetify.js, puedes establecer la propiedad
sortable
como un array con solo un elemento, ya sea “desc” o “asc”. Aquí tienes un ejemplo:En la sección del script, puedes definir la matriz
headers
con la propiedadsortable
establecida como un array con solo “asc” o “desc” como su valor:En este ejemplo, la columna “Nombre” solo admite la clasificación ascendente, y la columna “Edad” solo admite la clasificación descendente. La columna “Género” no admite ninguna clasificación al establecer la propiedad
sortable
enfalse
.Cuando un usuario hace clic en el encabezado de una columna ordenable, solo se alternará entre la clasificación ascendente y descendente, y la opción “no ordenar” ya no estará disponible.