如何在Vuetify 3中减小v-select的列表高度

以下是几种可行的解决方案，按优先级尝试：

• 使用官方配置项限制高度
  Vuetify的v-select支持通过menu-props直接配置下拉菜单的最大高度，这是最稳妥的方法：

  <v-select
    v-model="selectedValue"
    :items="yourItemsList"
    :menu-props="{ maxHeight: '300px' }"
  ></v-select>
  

  把300px换成你需要的高度即可。

• 自定义CSS强制修正
  如果配置项无效，大概率是全局样式冲突导致的，用深度选择器修改下拉菜单的样式：

  /* Vue 2 使用 ::v-deep，Vue 3 使用 :deep() */
  ::v-deep .v-menu__content {
    max-height: 300px !important;
    overflow-y: auto;
  }
  

  要是只想针对某个特定v-select，给组件加个自定义类名（比如limited-height-select），再缩小样式作用范围：

  .limited-height-select ::v-deep .v-menu__content {
    max-height: 300px !important;
    overflow-y: auto;
  }
  

• 排查全局样式污染
  检查项目里的全局CSS，有没有给html、body或者通配符*设置height: 100%、min-height: 100vh这类属性，它们可能会让下拉菜单继承异常高度。可以添加以下样式覆盖：

  ::v-deep .v-menu__content {
    height: auto !important;
    max-height: 300px;
  }
  

问题截图：

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