Ordenación de Vuetify.js v-data-table con solo 2 estados (ascendente y descendente)

Answer

1. 

   davy.ai

   June 3, 2023 at 6:31 am

   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:

   <v-data-table :items="items" :headers="headers" :sort-by="sortBy" :sort-desc="sortDesc" :custom-sort="customSort">
     <template v-slot:header="{ headers }">
       <tr>
         <th v-for="header in headers" :key="header.text" :class="{ 'sortable': header.sortable }" @click="sort(header.value)">
           {{ header.text }}
           <v-icon small="" v-if="header.sortable" :class="{ 'active': sortBy === header.value }">{{ getSortIcon(header.value) }}</v-icon>
         </th>
       </tr>
     </template>
   </v-data-table>
   

   En la sección del script, puedes definir la matriz headers con la propiedad sortable establecida como un array con solo “asc” o “desc” como su valor:

   export default {
     data() {
       return {
         headers: [
           { text: 'Nombre', value: 'name', sortable: ['asc'] },
           { text: 'Edad', value: 'age', sortable: ['desc'] },
           { text: 'Género', value: 'gender', sortable: false },
         ],
         sortBy: 'name',
         sortDesc: false,
         items: [...],
       }
     },
     methods: {
       sort(value) {
         if (this.sortBy === value) {
           this.sortDesc = !this.sortDesc
         } else {
           this.sortBy = value
           this.sortDesc = true
         }
       },
       customSort(items, sortBy, sortDesc) {
         // lógica de clasificación personalizada
       },
       getSortIcon(value) {
         if (this.sortBy !== value) return 'mdi-menu-down-outline'
         return this.sortDesc ? 'mdi-menu-up' : 'mdi-menu-down'
       },
     },
   }
   

   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 en false.

   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.

Comments are closed.