将另一行q-table中的q-table渲染为子级

Question

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

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

代码笔https://codepen.io/ijose/pen/eYzawpx

谢谢。

编辑：在客户端接收数据，如下

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

Answer 1

嵌套的子数据是一个只有一个对象和重复属性name的数组。它应该是一个对象数组：

data: [{
name: 'Frozen Yogurt',
childs: [
{ name: 'one' },
{ name: 'two' },
{ name: 'three' }
]
}, {
name: 'Ice cream sandwich',
childs: [
{ name: 'four' },
{ name: 'five' },
]
}, {
name: 'Eclair',
}]

由于q-table采用一个数据数组，所以内部表(与外部表相同(上不需要v-for。移除v-for并将data设置为当前外行的childs对象：

<q-tr :props="props" v-show="props.expand">  
<q-table                             
hide-header
hide-bottom
:data="props.row.childs"
:columns="columnsChilds"
style="background:yellow; min-width:300px"> 
</q-table>    
</q-tr>