除非指定了网格高度,否则 Devextreme-vue datagrid tbody 高度不会显示在 chrome 中 这会在 Firefox 中产生正确的结果在 chrome 中,主体缩小到 0px注意

问题描述

在我的项目中,我使用 "devextreme-vue": "^19.1.4"

我在 bootsrap 4 卡中有一个 Datagrid

<div class="card">
   <div class="card-header pd-y-8 pd-x-10 d-md-flex align-items-center justify-content-between">
      <h6 class="mg-b-0">Group Details</h6>
   </div>

   <div class="card-body pd-5">
      <dx-data-grid :allow-column-reordering="true"
                    :allow-column-resizing="true"
                    :column-fixing="{enabled: true}"
                    :columns="config.columns"
                    :data-source="details"
                    :ref="ref"
                    id="gridContainer"
                    :rowAlternationEnabled="true"
                    :show-borders="true"
                    @toolbar-preparing="onToolbarPreparing($event)"
                    key-expr="entityId">
      <!-- Other components here,e.g. pager,export,etc. -->
      </dx-data-grid>
   </div>
</div>

<style>
#gridContainer{
/*   height: 200px; */
}
</style>

这会在 Firefox 中产生正确的结果

firefox grid

在 chrome 中,主体缩小到 0px

chrome grid

如您所见,因为 tbody 在这里不可见。当我取消注释高度时,tbody 出现在 chrome 中,但没有滚动。在 Firefox 中,滚动按预期显示

如何解决这个问题。

注意

代码已经在生产中,devextrem-vue 版本不能轻易更新。

解决方法

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

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

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