Javascript 将另一行q表中的q表作为子表呈现

目标是呈现另一个列表中项目内的列表；例如，具有相应标题的章节列表

使用q-list通常可以相对轻松地完成这项工作

然而，我需要用q表来做这件事

我尝试了以下解决方案，但我在v-for方面遇到了一些困难

<div id="q-app">
  <div class="q-pa-md">
    <q-table
      :data="data"
      :columns="columns"
      row-key="name"
    >

      <template v-slot:body="props">
        <q-tr :props="props">
          <q-td auto-width>
            <q-btn size="sm" color="accent" round dense @click="props.expand = !props.expand" :icon="props.expand ? 'remove' : 'add'" />
          </q-td>
          <q-td
            v-for="col in props.cols"
            :key="col.name"
            :props="props"
          >
            {{ col.value }}
          </q-td>
        </q-tr>
        
        <q-tr 
            :props="props"
            v-show="props.expand" 
            v-for="item in data"
          >  
            <q-table                                      
               hide-header
               hide-bottom
               :data="item.childs"
               :columns="columnsChilds"
               style="background:yellow"> 
          </q-table>    
        </q-tr>
      </template>
    </q-table>
  </div>
 </div>

---

嵌套的子数据是一个数组，只有一个对象和重复的属性

name

。它应该是一个对象数组：

数据：[{
名称：“冷冻酸奶”，
儿童：[
{name:'one'}，
{name:'two'}，
{name:'three'}
]
}, {
名称：“冰淇淋三明治”，
儿童：[
{name:'four'}，
{name:'five'}，
]
}, {
名称：“Eclair”，
}]

由于

q-table

接受一个数据数组，因此内部表（与外部表相同）上不需要

v-for

。移除

v-for

并将

数据设置为当前外行的
childs
对象：



data:[
0:{
  name:'yogurt',
  childs:[
      0:{name:'one},
      1:{name:'two}
  ]
},
1:{
  name:'yogurt two',
  childs:[
      0:{name:'three},
      1:{name:'four}
  ]
},
]