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

  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在内表上使用 a （与外表相同）。删除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>