我想将合并两个独立的Vuetify功能合并为一个：

1. https://vuetifyjs.com/en/components/data-tables-->可扩展的数据表（但理想情况下，扩展时包含多个数据行）
2. https://vuetifyjs.com/en/components/expansion-panels-->外部控制扩展面板
   最终，我们的目标是拥有一个类似于以下内容的表（扩展/折叠所有一的表）：https://codepen.io/lzhoucs/pen/aadaJx
   这个表格的问题是，尽管我的项目中有相应的代码，但某些功能还是不能正常工作--比如点击打开和关闭一个表格。我相信这是因为这是一个与我使用的Vue版本不同的版本，我使用的是最新的，因为我发现了一些旧的样式。
   我尝试了很多方法，但最成功的尝试是在表中创建表。下面是代码：

<template>
<v-container>
  <v-data-table
    :headers="headers"
    :items="projects"
    :expanded="expanded"
    item-key="name"
    show-expand
    class="elevation-1"
    @click:row="clicked"
  >
    <template v-slot:expanded-item="{ headers }">
      <td :colspan="headers.length">
      <v-data-table
  :headers="peopleHeaders"
  :items="people"
  item-key='name'
  hide-default-footer
  class='elevation-1'>
  <template slot="item" slot-scope="props">
        <tr>
          <td>{{props.item.name}}</td>
          <td>{{props.item.major}}</td>
          <td>{{props.item.preference}}</td>
          <td>
          <v-btn color='success'>Accept</v-btn>
          <v-btn color='error'>Reject</v-btn>
          </td>
        </tr>
      </template>
  </v-data-table>
  </td>
    </template>
  </v-data-table>
</v-container>
</template>

<script>
export default {
  data() {
    return {
      expanded: [],
      headers: [
        {
          text: 'Name',
          align: 'left',
          sortable: true,
          value: 'name',
        },
        { text: 'Status', value: 'Status' },
      ],
      projects: [
        {
          name: '#this is the project they applied to',
          Status: 'Status: Pending',
        },
      ],
      peopleHeaders: [
        {
          text: 'Name',
          align: 'left',
          sortable: true,
          value: 'name',
        },
        {
          text: 'Major',
          align: 'left',
          sortable: true,
          value: 'major',
        },
        {
          text: 'Preference',
          align: 'left',
          sortable: true,
          value: 'preference',
        },
      ],
      people: [
        {
          name: 'BORB',
          major: 'SWE',
          preference: 'idk',
        },
      ],
    };
  },
  methods: {
    clicked(value) {
      this.expanded.push(value);
    },
  },
};
</script>

字符串
任何建议，如何结合合并的两个特点，以实现表所需的将不胜感激。