0
306
Views¿Cómo hacer que algunas de las columnas de la tabla contengan un cuadro desplegable para filtrar la tabla?
Estoy usando VueJs y Vuetify. Tengo la tabla de Vuetify donde presento los datos. Estoy tratando de editar la columna de encabezado de algunas de las columnas para poder agregar una barra de búsqueda desplegable para filtrar la tabla. Algo como:
Donde Select Item es en realidad el encabezado (consulte el símbolo de clasificación al lado). Podría agregarlo en el menú desplegable sobre la tabla, como se muestra en los documentos oficiales, pero estoy tratando de hacer que el menú desplegable sea la columna del encabezado en sí y no solo sobre la tabla.
El código actual:
<v-data-table class="elevation-1" :headers="headers" :items="items" :items-per-page="tableItemsPerPage" :footer-props="tableFooterSettings" :loading="tableLoading" hide-default-footer > donde headers es una matriz simple de los encabezados, por ejemplo:
{ text: 'data', value: 'pretty_data', align: 'center', sortable: true },Por supuesto, quiero que la columna aún se pueda ordenar (como se muestra en la imagen [la flecha]). ¿Cómo puedo hacerlo?
1 answers
Answer question0
Creó esta demostración de trabajo. Espero que funcione según sus expectativas.
new Vue({ el: '#app', data: () => ({ selected: [], headers: [ { text: 'Name', align: 'left', value: 'name' } ], filters: { name: [] }, desserts: [ { name: 'Frozen Yogurt' }, { name: 'Ice cream sandwich' }, { name: 'Eclair' }, { name: 'Cupcake' }, { name: 'Gingerbread' }, { name: 'Jelly bean' }, { name: 'Lollipop' }, { name: 'Honeycomb' }, { name: 'Donut' }, { name: 'KitKat' } ] }), computed: { filteredDesserts() { return this.desserts.filter(d => { return Object.keys(this.filters).every(f => { return this.filters[f].length < 1 || this.filters[f].includes(d[f]) }) }) } }, methods: { columnValueList(val) { return this.desserts.map(d => d[val]) } } }) <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@1.1.10/dist/vuetify.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/vuetify@1.1.10/dist/vuetify.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> <div id="app"> <v-app id="inspire"> <v-data-table v-model="selected" :headers="headers" :items="filteredDesserts" item-key="name" class="elevation-1" > <template slot="headers" slot-scope="props"> <tr class="grey lighten-3"> <th v-for="header in props.headers" :key="header.text" > <div v-if="filters.hasOwnProperty(header.value)"> <v-select flat hide-details small multiple clearable :items="columnValueList(header.value)" v-model="filters[header.value]"> </v-select> </div> </th> </tr> </template> <template slot="items" slot-scope="props"> <tr> <td>{{ props.item.name }}</td> </tr> </template> </v-data-table> </v-app> </div>