Vue数据表可扩展行问题

Question

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

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

我尝试过的：我已按照文档here is the reproducible code that you can access on 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 expandable table 的文档，items prop 应该是一个具有唯一项目对象的数组。

但是您提供了一个带有单个对象的数组（它具有多个具有相同键的对象）