v-autocomplete组件选中元素后无法显示完整文本如何解决

问题根因 #

Vuetify 的 v-autocomplete 组件默认给输入框内的选中内容设置了text-overflow: ellipsis、white-space: nowrap的单行超出省略规则，所以会出现下拉选项文本完整、选中后内容被截断的现象：

• 下拉选项正常展示效果：
• 选中后文本截断效果：

解决方法 #

方法1：覆盖默认截断样式 #

给组件添加自定义类名，通过CSS覆盖默认样式即可，支持选择单行完整展示或者自动换行展示：

<template>
  <!-- 给组件添加自定义类名 -->
  <v-autocomplete
    class="full-text-autocomplete"
    v-model="selected"
    :items="optionList"
    label="选择选项"
  />
</template>

<style scoped>
/* scoped样式下需要用深度选择器穿透组件样式，Vue2用/deep/、Vue3用:deep() */
:deep(.full-text-autocomplete .v-field__input) {
  /* 单行完整展示，不省略 */
  overflow: visible;
  text-overflow: unset;
  /* 如果需要允许文本换行，补充下面两个属性 */
  /* white-space: normal;
  min-height: fit-content; */
}
</style>

如果你使用的是Vuetify 2版本，把上面选择器里的.v-field__input替换为.v-input__slot即可生效。

方法2：调整组件宽度适配文本 #

如果希望保持单行省略规则，只需要给组件设置足够的宽度撑满父容器或者固定最小宽度即可：

<v-autocomplete
  style="min-width: 400px; width: 100%"
  v-model="selected"
  :items="optionList"
/>

方法3：自定义选中项渲染插槽 #

如果需要完全控制选中内容的展示逻辑，可以使用selection插槽自定义渲染：

<v-autocomplete
  v-model="selected"
  :items="optionList"
>
  <template #selection="{ item }">
    <!-- 自定义选中内容的样式和展示逻辑 -->
    <span class="whitespace-nowrap overflow-visible">{{ item.label }}</span>
  </template>
</v-autocomplete>

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