Vuetify 3中如何调整ComboBox组件下拉框的高度？

不用依赖自定义CSS选择器，Vuetify 3 提供了官方规范的方式来控制ComboBox下拉菜单的高度，核心是利用组件的menu-props属性向下拉菜单传递配置：

基础实现（设置最大高度+滚动） #

直接通过menu-props给内部的下拉菜单设置最大高度，并添加滚动样式：

<v-combobox
  v-model="selectedItem"
  :items="yourLargeItemList"
  :menu-props="{ maxHeight: 300, contentClass: 'overflow-y-auto' }"
></v-combobox>

参数说明： #

• menu-props：Vuetify官方提供的用于向下拉菜单（底层基于v-menu组件）传递属性的API，完全符合组件封装规范。
• maxHeight: 300：指定下拉菜单的最大高度为300px，超出该高度的内容会被裁剪。
• contentClass: 'overflow-y-auto'：给菜单内容容器添加垂直滚动样式，确保超出高度的选项可以通过滚动访问。

优化：避免遮挡输入框 #

如果需要进一步避免下拉菜单紧贴输入框导致遮挡，可以额外添加offsetY属性让菜单自动偏移：

<v-combobox
  v-model="selectedItem"
  :items="yourLargeItemList"
  :menu-props="{ maxHeight: 300, contentClass: 'overflow-y-auto', offsetY: true }"
></v-combobox>

这种方式完全基于Vuetify官方API，不需要依赖DOM结构的选择器，不会因为组件版本更新导致样式失效，是官方推荐的最佳实践。

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