使用 Vuetify v-data-table，我想折叠/展开单个组？答案

【问题标题】：Using Vuetify v-data-table, I would like to collapse/expand a single group?使用 Vuetify v-data-table，我想折叠/展开单个组？
【发布时间】：2019-09-08 14:57:05
【问题描述】：

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

我创建了一个折叠 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>

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：

对我来说，eslint 接受了以下内容：

【解决方案2】：

group.header 有一个名为 toggle 的道具。它是一个控制组项扩展的功能。您所要做的就是在您的按钮中调用它：

<template v-slot:group.header="{ group, toggle }">
    <v-btn text icon small color="white" @click="toggle">

【讨论】：