将另一行 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

Answer 1

嵌套子数据是一个只有一个对象和一个重复属性的数组name。它应该是一个对象数组：data: [{&nbsp; name: 'Frozen Yogurt',&nbsp; childs: [&nbsp; &nbsp; { name: 'one' },&nbsp; &nbsp; { name: 'two' },&nbsp; &nbsp; { name: 'three' }&nbsp; ]}, {&nbsp; name: 'Ice cream sandwich',&nbsp; childs: [&nbsp; &nbsp; { name: 'four' },&nbsp; &nbsp; { name: 'five' },&nbsp; ]}, {&nbsp; name: 'Eclair',}]由于q-table需要一组数据，因此您不需要v-for在内表上使用 a （与外表相同）。删除v-for并将 设为data当前外行的childs对象：<q-tr :props="props" v-show="props.expand">&nbsp;&nbsp;&nbsp; &nbsp; <q-table&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; hide-header&nbsp; &nbsp; &nbsp; &nbsp; hide-bottom&nbsp; &nbsp; &nbsp; &nbsp; :data="props.row.childs"&nbsp; &nbsp; &nbsp; &nbsp; :columns="columnsChilds"&nbsp; &nbsp; &nbsp; &nbsp; style="background:yellow; min-width:300px">&nbsp;&nbsp; &nbsp; </q-table>&nbsp; &nbsp;&nbsp;</q-tr>