0
243
Vistas¿Cómo hacer que esta tabla se ordene por esta columna en particular cuando se carga inicialmente?
Tengo una tabla bootstrap-vue que se parece a esto;
Aquí está el código;
<template> <div> <b-table striped hover :items="items" :fields="fields"></b-table> </div> </template> <script> export default { data() { return { // Note 'isActive' is left out and will not appear in the rendered table fields: [ { key: 'last_name', sortable: true }, { key: 'first_name', sortable: false }, { key: 'age', label: 'Person age', sortable: true, // Variant applies to the whole column, including the header and footer variant: 'danger' } ], items: [ { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' } ] } } } </script> Cuando esta tabla se carga inicialmente, quiero especificar que la tabla se ordene de acuerdo con la columna Person age en orden descendente.
Estoy usando bootstrap-vue y Vue v2.6
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede usar estos dos atributos en <b-table> :
sort-by="age" :sort-desc="true"demostración:
new Vue({ el: '#app', data: { fields: [ { key: 'last_name', sortable: true }, { key: 'first_name', sortable: false }, { key: 'age', label: 'Person age', sortable: true, // Variant applies to the whole column, including the header and footer variant: 'danger' } ], items: [ { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' }, { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' }, { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' }, { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' } ] } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/> <div id="app"> <b-table striped hover sort-by="age" :sort-desc="true" :items="items" :fields="fields"></b-table> </div>---- O ------
También puede vincular estos atributos dinámicamente desde la propiedad de datos con la opción .sync .
<v-data-table :sort-by.sync="sortBy" :sort-desc.sync="sortDesc" ></v-data-table> data () { return { sortBy: 'age', sortDesc: true, } }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta