在另一行 q-table 中渲染 q-table 作为子项

Question

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

这通常使用 q-list 相对容易完成。

但是，我需要用 q-tables 来做到这一点。

我尝试了以下解决方案，但我在使用 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>