Vue数据表可扩展行问题

Question

问题：我无法在数据表中添加可扩展行。没有显示。

目标：我需要用可扩展的行填充数据表中的一些数据。

我尝试过的：我已遵循文档，这是您可以在codepen上访问的可重现代码。您可以看到，取消注释填充我的数据表的代码后，可扩展行不再可见。

用于添加可展开行的代码：

     <template v-slot:top>
    <v-toolbar flat>
      <v-toolbar-title>Data</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>

用于在数据表中添加数据的代码：

<!--       <template  v-slot:body="props">
    <tr v-for="index in props.items" :key="index.Info">
      <td id="table-data" v-for="header in headers" :key="header.Info" class="text-left">
        {{ index.packetParsed[header.value] }}
      </td> 
    </tr>      
  </template> -->

注意：请注意，我无法更改从数据库检索的数据结构。

Answer 1

正如您提到的，数据结构无法更改

在您提供的代码笔中，我看到的数据为

dataFromDatabase: [ { packetParsed: { Name: "Bill", Address: "NY", Contact: "1234", Info: "Mgr", }, packetParsed: { Name: "Tom", Address: "CA", Contact: "9876", Info: "Sr Mgr", }, }, ],

您能否解释一下为什么数据中有一个对象包含具有相同键的对象（注意：如果您读取时所有键都相同，我们只能读取最后一个对象）

根据 vuetify 可扩展表的文档，items 属性应该是一个具有唯一 item 对象的数组。

但是您提供了一个包含单个对象的数组（其中有多个具有相同键的对象）