Tengo una tabla de datos de elementos, quiero expandir solo la fila seleccionada para mostrar información adicional, pero termina expandiendo todos los elementos de fila existentes.
EDITAR Lo siento , quiero expandir solo sin el uso del icono desplegable
Aquí está mi código:
<v-data-table v-if="selectedItem" dense :headers="headers" :items="itemsList" item-key="name" class="elevation-1" single-expand mobile-breakpoint="0" > <template v-slot:item="row"> <tr @click=" () => { row.expand(!row.isExpanded); } " > <td>{{ row.item.date}}</td> <td>{{ row.item.firstName}}</td> <td>{{ row.item.lastName}}</td> <td>{{ row.item.email? `Yes` : `No` }}</td> <td><v-icon small> mdi-pencil </v-icon></td> </tr> </template> <template v-slot:expanded-item="{ headers, item }"> <td class="pa-4" :colspan="headers.length"> <tr v-if="item.date"> <h4 style="font-size: 12px"> <span style="color: #888"> Issued Date: </span> {{ item.date}} </h4> </tr> <tr v-if="item.firstName"> <h4 style="font-size: 12px"> <span style="color: #888"> First Name: </span> {{ item.firstName}} </h4> </tr> <tr v-if="item.lastName"> <h4 style="font-size: 12px"> <span style="color: #888"> Last Name: </span> {{ item.lastName}} </h4> </tr> <tr v-if="item.email"> <h4 style="font-size: 12px"> <span style="color: #888"> Email: </span> {{ item.email}} </h4> </tr> </td> </template>Puede usar la demostración proporcionada por vuetify en el sitio web https://vuetifyjs.com/en/components/data-tables/#expandable-rows
Var: expandido=[ ] Esta es la plantilla
<template> <v-data-table :headers="dessertHeaders" :items="desserts" :single-expand="false" :expanded.sync="expanded" item-key="name" show-expand class="elevation-1" > <template v-slot:top> <v-toolbar flat> <v-toolbar-title>Expandable Table</v-toolbar-title> <v-spacer></v-spacer> <v-switch v-model="singleExpand" label="Single expand" class="mt-2" ></v-switch> </v-toolbar> </template> <template v-slot:expanded-item="{ headers, item }"> <td :colspan="headers.length"> More info about {{ item.name }} </td> </template> </v-data-table> </template>Si desea expandir la fila sin usar el ícono de expandir, puede usar esto
<v-data-table @click:row="expandRow"> ... </v-data-table> expandRow(item, event) { if(event.isExpanded) { var index = this.expanded.findIndex(i => i === item); this.expanded.splice(index, 1) } else { this.expanded.push(item); } }