在另一行 q-table 中将 q-table 呈现为 child

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 需要一个数据数组，因此您不需要在内部 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>

在另一行 q-table 中将 q-table 呈现为 child

Render q-table within another row q-table as a child

javascript

vue.js

quasar

vue-component

vuejs2