QuTable,iTable布局符合QTable

问题描述

我遵循Quasar QTable中的示例,我放置了一个iframe(嵌入youtube),而不是每个卡的文本内容。如果是文本,它将很好地遵循布局网格。第三张卡之后,第四张卡将进入下一行。但是,如果是iframe,则不会继续进行下一行操作。

<q-table
  grid
  :card-container-class="cardContainerClass"
  :data="data"
  :columns="columns"
  row-key="name"
  :filter="filter"
  hide-header
  :rows-per-page-options="rowsPerPageOptions"
>

  <template v-slot:item="props">
    <div class="q-pa-xs col-xs-12 col-sm-6 col-md-6">
      <q-card>
        <q-card-section class="text-center">
          <div class="q-pa-md row">
            <div class="col-12">
              <!-- Won't work -->
              <iframe style="width:200px; height:300px;" ></iframe>
              <!-- Remove iframe,and replace with normal text or other HMTL element will work -->
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </template>
</q-table>

(请参阅https://quasar.dev/layout/grid/flexbox-patterns“带有伪选择器的砌体来破坏行/列”)

有人有任何线索吗?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)