在另一行 q-table 中渲染 q-table 作为子级答案

【问题标题】：Render q-table within another row q-table as a child在另一行 q-table 中渲染 q-table 作为子级
【发布时间】：2020-11-20 11:44:29
【问题描述】：

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

这通常使用 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

谢谢。

EDITED：在客户端接收数据如下

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

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component quasar

【解决方案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>

【讨论】：