Ag-Grid 20.1.0结合Vuetify时垂直滚动条消失问题求助

我帮你排查过这个问题了，升级到Ag-Grid 20.x后滚动条异常，主要是因为新版本对容器高度的计算逻辑做了更严格的调整，和Vuetify的flex布局结合时，高度没有正确传递到网格容器，导致网格自动撑高页面，出现全局滚动条而非内部滚动条。

这里有几个可行的解决方案，你可以逐个尝试：

1. 确保Vuetify组件链正确传递高度 #

给Vuetify的布局组件加上fill-height类，让高度能一路传递到Ag-Grid的容器：

<v-content>
  <v-container fluid fill-height>
    <v-layout fill-height>
      <v-flex fill-height>
        <div id="myGrid" class="ag-theme-balham" style="height: 100%; width: 100%;"></div>
      </v-flex>
    </v-layout>
  </v-container>
</v-content>

这样每个父容器都会填满可用空间，Ag-Grid的height: 100%就能正确获取到容器高度，超出内容时自动显示内部垂直滚动条。

2. 显式设置Ag-Grid的固定高度 #

如果flex布局的高度传递还是有问题，可以直接给网格容器设置具体的高度值，比如基于视口高度计算：

<div id="myGrid" class="ag-theme-balham" style="height: calc(100vh - 64px); width: 100%;"></div>

这里的64px可以替换成你页面顶部导航栏的高度，这样网格会固定在剩余的视口空间里，自然出现内部滚动条。

3. 检查Ag-Grid配置是否启用了自动高度 #

如果你的Ag-Grid初始化代码里设置了domLayout: 'autoHeight'，一定要去掉这个配置——这个选项会让网格自适应内容高度，不会生成内部滚动条，也是升级后容易忽略的点。

这些方法应该能帮你恢复Ag-Grid的垂直滚动条，回到19.1.2版本时的正常状态。

内容的提问来源于stack exchange，提问作者corsair