如何自定义v-select：保持标签不浮动、选中项不以列表显示（不使用hide-selected）

一、让标签始终显示且不浮动 #

默认v-select在选中值后标签会上浮到输入框顶部，要让标签固定在原位始终显示，按以下操作：

1. 给v-select添加persistent-label属性，确保有选中值时标签不会消失
2. 添加自定义CSS覆盖默认的浮动样式：

/* 强制标签保持原位，不上浮 */
.v-select .v-label--active {
  transform: none !important;
  top: 0 !important;
  font-size: 1rem !important;
}
/* 给输入框内容留出标签的空间 */
.v-select .v-input__control {
  padding-top: 1.5rem !important;
}

二、避免选中项以列表形式展示（保留下拉列表中的选中项） #

如果你的v-select开启了多选（multiple），默认会把选中项以chip列表形式展示在输入框内，要改成文本形式且不隐藏下拉里的选中项（不用hide-selected），可以用selection插槽自定义显示：

<v-select
  v-model="selectedCategories"
  :items="categoryItems"
  label="Project Category"
  multiple
  persistent-label
>
  <!-- 自定义选中项的显示，拼接成文本 -->
  <template v-slot:selection="{ selected }">
    {{ selected.map(item => item.name).join('、') }}
  </template>
</v-select>

这里selected是选中的项数组，根据你的items结构调整item.name为对应的字段名，这样输入框里就会显示拼接后的文本，而不是列表式的chip，同时下拉列表里的选中项仍然会保留显示。

如果是单选模式却出现列表展示，检查是否是item-text设置错误或者item结构问题，确保item-text指向正确的文本字段即可。

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