折叠或展开vuetify 2数据表中的组

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    item-key="name"
    show-expand
    :expanded.sync="expandedItems"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>My Data Table</v-toolbar-title>
      </v-toolbar>
    </template>
    <template v-slot:item="{ item, expand }">
      <tr>
        <td>
          <v-icon @click="expand(!expandedItems.includes(item))">
            {{ expandedItems.includes(item) ? 'mdi-chevron-up' : 'mdi-chevron-down' }}
          </v-icon>
        </td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </template>
    <template v-slot:expanded-item="{ headers, item }">
      <td :colspan="headers.length">
        <v-card>
          <v-card-text>
            Additional information about {{ item.name }}
          </v-card-text>
        </v-card>
      </td>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Expand', value: 'expand' },
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Gender', value: 'gender' },
      ],
      items: [
        { name: 'John Doe', age: 25, gender: 'Male' },
        { name: 'Jane Smith', age: 30, gender: 'Female' },
        { name: 'Bob Johnson', age: 35, gender: 'Male' },
      ],
      expandedItems: [],
    };
  },
};
</script>