如何设置Vuetify中v-select下拉框显示全部选项

方法1：通过menu-props自定义下拉菜单高度 #

Vuetify的v-select支持通过menu-props向下拉菜单传递配置，设置足够容纳所有选项的max-height即可。你可以根据选项的实际高度调整数值，也可以直接用fit-content让菜单高度自适应内容：

<v-select
  :items="['周一', '周二', '周三', '周四', '周五', '周六', '周日']"
  :menu-props="{ maxHeight: 'fit-content' }"
></v-select>

方法2：自定义CSS覆盖默认样式 #

如果menu-props配置不生效，直接修改下拉菜单的样式：

1. 给目标v-select添加自定义类：

<v-select
  class="weekday-full-select"
  :items="weekdays"
></v-select>

2. 添加对应样式（如果是组件内scoped样式，需要用深度选择器::v-deep）：

/* 全局样式 */
.weekday-full-select .v-menu__content {
  max-height: fit-content !important;
  overflow-y: visible !important;
}

/* 组件内scoped样式 */
::v-deep .weekday-full-select .v-menu__content {
  max-height: fit-content !important;
}

你可能遗漏的搜索方向 #

• Vuetify v-select menu props 自定义高度
• v-select dropdown 显示全部选项
• Vuetify v-menu content 高度覆盖
• v-select 禁用下拉滚动条

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