vue.js之使用 Vuetify v-data-table，我想折叠/展开单个组

我有一个带有分组依据和自定义组标题的数据表。我想折叠和展开类似于标准组标题功能的单个组

我创建了一个折叠 btn，但我不确定哪个命令或属性会进行折叠(然后展开)

...v-data-table with group-by clause.... 
 
<template v-slot:group.header="grp"> 
   <v-btn text icon small color="white" @click="<not sure what to place here>"> 
      <v-icon>mdi-minus</v-icon>  
   </v-btn> 
   <span class="mx-2 subtitle-1">{{grp.items[0].startTime | dateString}}</span> 
      <span class="mx-2 subtitle-1"> Group {{grp.items[0].grpCode}}</span> 
</template> 

请您参考如下方法:

即使问题有点老，我也想展示一个完整的工作解决方案:

...v-data-table with group-by clause.... 
 
<template v-slot:group.header="{items, isOpen, toggle}"> 
   <th colspan="100%"> 
      <v-btn text icon small color="white" @click="toggle"> 
         <v-icon>{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}</v-icon>  
      </v-btn> 
      <span class="mx-2 subtitle-1">{{items[0].startTime | dateString}}</span> 
      <span class="mx-2 subtitle-1"> Group {{items[0].grpCode}}</span> 
   </th> 
</template>