Handsontable 无法在 q-tab-panel 中正确呈现

Question

我有一些类星体面板，里面有一些内容。其中一个内容是可动手操作的，但未正确呈现。在代码的开头，我完美地将手控器渲染成了一张q卡。

Well drawn handsontable

如果我将完全相同的代码放在 q-tab-panel 中，则会错误地绘制它。

Incorrectly drawn handsontable

这是我的vue组件的全部代码

<template>
  <q-page padding>
    <q-card class="q-pa-md q-mt-lg">
      <div id="example1" class="hot">
        <hot-table :settings="hotSettings"></hot-table>
      </div>
    </q-card>
    <q-card class="q-pa-md q-mt-lg">
      <q-tabs v-model="tab">
        <q-tab v-for="tab in tabs" :key="tab.name" v-bind="tab"/>  
      </q-tabs>
     <q-tab-panels v-model="tab" animated>
        <q-tab-panel v-for="tab in tabs" :key="tab.name" :name="tab.name" class="q-pa-none">
          <h5>{{tab.name + " content"}}</h5>
          <div id="example1" class="hot">
            <hot-table :settings="hotSettings"></hot-table>
          </div>
          <div v-for="n in 5" :key="n" class="q-my-md">{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.</div>
        </q-tab-panel>
      </q-tab-panels>
    </q-card>
  </q-page>
</template>

<script>
import { HotTable } from '@handsontable/vue';
import Handsontable from 'handsontable';
import 'handsontable/dist/handsontable.full.css';

export default {
  components: { HotTable },
  name: 'somename',
  data () {
    return {
      tab: 'tab1',
      tabs : [
              { name: 'tab1',    label: 'tab 1' },
              { name: 'tab2',    label: 'tab 2' },
              { name: 'tab3',    label: 'tab 3' },
              { name: 'tab4',    label: 'tab 4' }
              ],
      hotSettings: {
        data: Handsontable.helper.createSpreadsheetData(6, 10),
        rowHeaders: true,
        colHeaders: true,
        renderAllRows: true
      },
    }
  }
}
</script>

我应该怎么做才能从选项卡面板内的代码开头获得相同的结果？

Answer 1

问题是我没有指定 handsontable 的高度，因此它在选项卡面板中以默认高度呈现。感谢https://github.com/hawkeye64 for the answer (https://github.com/quasarframework/quasar/discussions/8726#discussioncomment-570628)

解决方法：添加：height:200 到 hotSettings

Handsontable 无法在 q-tab-panel 中正确呈现

Handsontable not rendering properly inside a q-tab-panel

handsontable

vue.js

quasar