第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

將另一行 q-table 中的 q-table 作為子項渲染

將另一行 q-table 中的 q-table 作為子項渲染

梵蒂岡之花 2023-08-18 17:44:17
目標是渲染另一個列表中項目內(nèi)的列表;例如帶有各自標題的章節(jié)列表。這通??梢酝ㄟ^ 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
查看完整描述

1 回答

?
繁花不似錦

TA貢獻1851條經(jīng)驗 獲得超4個贊

嵌套子數(shù)據(jù)是一個只有一個對象和一個重復(fù)屬性的數(shù)組name。它應(yīng)該是一個對象數(shù)組:


data: [{

  name: 'Frozen Yogurt',

  childs: [

    { name: 'one' },

    { name: 'two' },

    { name: 'three' }

  ]

}, {

  name: 'Ice cream sandwich',

  childs: [

    { name: 'four' },

    { name: 'five' },

  ]

}, {

  name: 'Eclair',

}]

由于q-table需要一組數(shù)據(jù),因此您不需要v-for在內(nèi)表上使用 a (與外表相同)。刪除v-for并將 設(shè)為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>


查看完整回答
反對 回復(fù) 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 194 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號