Vue 数据 table 可扩展行问题

Question

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

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

我尝试了什么： 我已经按照文档进行操作，here is the reproducible code that you can access on codepen。您可以在取消注释填充我的数据的代码后看到 table，可扩展行不再可见。

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

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

用于在数据中添加数据的代码table:

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

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

在你提供的codepen中，我看到的数据是

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 应该是一个包含唯一项目对象的数组。

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

Vue 数据 table 可扩展行问题

Vue data table expandable row issue

datatable

row

expandable

vue.js