Tengo una tabla de datos v y los elementos en las primeras columnas son algunos valores verdaderos y falsos. Al hacer clic en el ícono 'ordenable' en el encabezado, clasifico estos elementos en la columna. Quiero hacer que cuando abra la página, los valores 'verdaderos' se ordenen primero. ¿Cómo puedo manejar esto?
headers: [ { text: '', sortable: true, value: 'status', }]HTML:
<v-data-table :pagination.sync="pagination" :headers="headers" :items="items" > <template> <tr> <td> <v-icon v-if="status"> {{status}} </v-icon> </td> </tr> </template> </v-data-table>Los valores de estado son como: Verdadero, Falso, Verdadero, Falso, Falso
Quiero ordenar los elementos de la columna así: Verdadero Verdadero Falso Falso Falso
Primero valores verdaderos y luego falsos.
Puede usar sort-by y sort-desc
<v-data-table :pagination.sync="pagination" :headers="headers" :items="items" sort-by="status" :sort-desc="true" > <template> <tr> <td> <v-icon v-if="status"> {{status}} </v-icon> </td> </tr> </template> </v-data-table>Puedes consultar más aquí
Puede usar la clasificación externa usando sortBy y sortDesc :
new Vue({ el: "#app", vuetify: new Vuetify(), data: () => ({ headers: [ { text: '', sortable: true, value: 'status' } ], items: [ { status: "True" }, { status: "False" }, { status: "True" } ], sortBy: "status", sortDesc: true }) }); <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <v-app id="app"> <v-data-table :headers="headers" :items="items" :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" > <template v-slot:item.status="{ item }"> <tr> <td> <v-icon v-if="item.status">{{item.status}}</v-icon> </td> </tr> </template> </v-data-table> </v-app>