Vuetify数据表在单击时展开所有行，而不仅仅是选中的行

Question

我有一个数据表的项目，我想只展开选定的行，以显示额外的信息，但它最终展开所有现有的行项目，而不是。

编辑抱歉我想在不使用下拉图标的情况下单次展开

下面是我的代码:

<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>

Answer 1

您可以使用vuetify提供的演示在网站上https://vuetifyjs.com/en/components/data-tables/expandable-rows

Var:扩大= []这是模板

<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>

如果你想在不使用展开图标的情况下展开行，你可以使用

<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); } }