Vue/Vuetify3：如何固定v-autocomplete/v-select菜单宽度与下拉框一致

有两种可靠的方法可以实现这个需求：

方法1：利用组件内置的menu-props属性 #

v-select和v-autocomplete的下拉菜单由内部的v-menu组件渲染，你可以通过menu-props传递宽度配置，强制菜单和输入框同宽：

<!-- v-select示例 -->
<v-select
  v-model="selectedValue"
  :items="optionList"
  :menu-props="{ width: '100%' }"
></v-select>

<!-- v-autocomplete示例 -->
<v-autocomplete
  v-model="selectedValue"
  :items="optionList"
  :menu-props="{ width: '100%' }"
></v-autocomplete>

如果单纯设置width: '100%'不生效，试试用min-width和max-width锁定范围：

:menu-props="{ minWidth: '100%', maxWidth: '100%' }"

方法2：自定义CSS样式（更灵活） #

如果props配置达不到预期，直接给菜单容器加样式。Vuetify的下拉菜单容器类是.v-menu__content，用Vue的:deep()穿透scoped样式，避免全局污染：

<template>
  <div class="fixed-menu-select">
    <v-select
      v-model="selectedValue"
      :items="optionList"
    ></v-select>
  </div>
</template>

<style scoped>
.fixed-menu-select :deep(.v-menu__content) {
  width: 100% !important;
  min-width: unset !important;
  max-width: unset !important;
}
</style>

补充：处理过长的选项文本 #

菜单宽度固定后，如果选项文本太长会溢出，给选项加省略样式即可：

<v-select
  v-model="selectedValue"
  :items="optionList"
  :menu-props="{ width: '100%' }"
>
  <template v-slot:item="{ item }">
    <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
      {{ item }}
    </div>
  </template>
</v-select>

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