如何防止在 v-select 中将所选项目显示为列表

Question

如何自定义 v-select 以保持标签不浮动并防止将所选项目显示为列表（不使用

hide-selected

从选项列表中删除项目）

请在此处找到示例应用程序。

预期行为：始终维护项目类别标签。

当前行为：标签浮动到顶部并列出用户选择

Answer 1

使用placeholder代替标签，它不会浮动，但一旦做出选择它仍然会消失。要进行纠正，您需要覆盖选择槽以继续显示与以前相同的占位符文本。

<v-select
  placeholder="Project Category"
>
  <template v-slot:selection="{ item, index }">
    <div v-if="index == 0">Project Category</div>
  </template>

现在唯一的区别是占位符文本的不透明度是 < 1, while the selection text is 1, so you'll see that opacity change when selecting/unselecting a value. To change the placeholder opacity to match the selection opacity you can add this style:

<style scoped>
  .v-select :deep(input::placeholder) {
    opacity: 1 !important;
  }
</style>

演示

或者，如果您希望选择的不透明度与占位符不透明度相匹配...

<style scoped>
  .v-select :deep(.v-select__selection) {
    opacity: 0.38 !important;
  }
</style>