Handsontable 无法在 q-tab-panel 中正确渲染

Posted 2023-03-22

【中文标题】Handsontable 无法在 q-tab-panel 中正确渲染

【英文标题】：Handsontable not rendering properly inside a q-tab-panel

【发布时间】：2021-06-25 20:56:55

【问题描述】：

我有一些类星体面板，里面有一些内容。其中一个内容是可动手操作的，但无法正确呈现。在代码的开头，我完美地将handsontable 渲染成q-card。

精心绘制的手绘桌

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

手绘不正确

这是我的 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>

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

【参考方案1】：

问题是我没有指定handsontable 的高度，因此它在选项卡面板中使用默认高度进行渲染。感谢https://github.com/hawkeye64的回答（https://github.com/quasarframework/quasar/discussions/8726#discussioncomment-570628）

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