Primevue Multiselect组件如何自动增高以显示全部已选选项？

针对使用display="chip"模式时已选选项被截断的问题，核心是PrimeVue Multiselect的默认样式给输入区域设置了固定高度与溢出隐藏，只需覆盖对应样式即可实现组件自动增高：

1. 给Multiselect组件添加自定义类名（方便精准定位样式）：

<div class="flex flex-wrap items-center gap-2 mb-4"> 
  <label for="grapes" class="font-semibold w-20">Grapes</label> 
  <MultiSelect  
    v-model="selected.grapes" 
    display="chip" 
    :options="store.grapes"  
    optionLabel="name"  
    optionValue="id"  
    filter  
    class="ml-2 w-full md:w-[13.4rem] auto-height-multiselect"  
  /> 
  <Button type="button" icon="pi pi-plus" size="small" @click="dialog_visible = true" /> 
</div>

2. 添加以下CSS样式（若使用Tailwind，可放入自定义样式区块或全局样式文件）：

.auto-height-multiselect .p-multiselect-chip-container {
  height: auto !important;
  min-height: 2.5rem; /* 保留未选时的基础高度 */
  overflow: visible !important;
}

.auto-height-multiselect .p-multiselect-input {
  height: auto !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

说明 #

• .p-multiselect-chip-container是包裹已选Chip的容器，默认固定高度限制了内容展示，改为height:auto后可随内容自动增高
• 保留min-height是为了保证未选中任何选项时，组件保持正常的基础高度
• .p-multiselect-input是组件的输入框元素，同步取消固定高度避免限制容器的自适应

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