Me pregunto si hay una manera de hide una fila/elemento completo en una tabla de datos de vuetify. He leído hilos sobre ocultar columnas pero no elementos de tablas de datos.
Según tengo entendido, desea ocultar las filas específicas de la <v-data-table> . En caso afirmativo, puede lograrlo utilizando v-slot y manipulando la plantilla.
demostración :
new Vue({ el: '#app', vuetify: new Vuetify(), data () { return { headers: [ { text: 'Dessert', value: 'name' } ], items: [ { name: 'Frozen Yogurt', show: true }, { name: 'Ice cream sandwich', show: false }, { name: 'Eclair', show: true }, { name: 'Cupcake', show: false } ] } }, }) <script src="https://unpkg.com/vue@2.x/dist/vue.js"></script> <script src="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.6/dist/vuetify.min.css"/> <link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/> <div id="app"> <v-app id="inspire"> <v-data-table :headers="headers" :items="items" class="elevation-1" > <template v-slot:item="props"> <template v-if="props.item.show"> <tr>{{ props.item.name }}</tr> </template> </template> </v-data-table> </v-app> </div>Creo que pasar una matriz vacía a sus :items solucionaría su problema. o puedes hacer este :items="defaultVales || desserts" .
En mi opinión, la mejor forma de manejar esto es agregar una propiedad show a sus objetos y usar una propiedad computada para ocultar y mostrar elementos.
Aquí ocultará la columna al click .
new Vue({ el: '#app', vuetify: new Vuetify(), computed:{ showItems(){ return this.desserts.filter(x => x.show) } }, data() { return { headers: [ { text: 'Name', value: 'name' }, { text: 'Score', value: 'score' }, ], desserts: [{ name: "Frozen", score: 66, show: true, }, { name: "Tom", score: 100, show: true, }, { name: "Eclair", score: 100, show: true, }, { name: "Frozen", score: 89, show: true, }, ] } }, methods: { hideColumn(col){ col.show = false } } }) <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.css'> <script src='https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js'></script> <script src='https://cdn.jsdelivr.net/npm/vuetify@2.3.4/dist/vuetify.min.js'></script> <div id="app"> <v-data-table :items="showItems" :headers="headers" @click:row="hideColumn" > </v-data-table> </div>