Vue 2中v-select多选时如何显示选项外的自定义提示文本

完全可以实现你的需求，下面提供两种简单的方案，基于你当前的Vuetify v-select代码修改：

方案一：使用自定义selection插槽（推荐） #

利用Vuetify v-select的selection插槽，完全自定义选中后的显示内容，同时保留默认的placeholder作为未选中时的提示：

<template>
  <div>
    <v-select 
      v-model="selectedFruits" 
      :items="fruits" 
      label="name" 
      multiple
      placeholder="选择水果"
    >
      <!-- 自定义选中后的显示内容 -->
      <template v-slot:selection="{ items }">
        <span v-if="items.length > 0">已选择水果</span>
      </template>
    </v-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: 'Apple' },
        { name: 'Mango' },
        { name: 'Banana' },
        { name: 'Berries' },
        { name: 'Muskmelon' }
      ],
      selectedFruits: []
    }
  }
}
</script>

说明： #

• placeholder="选择水果"：未选中任何选项时，组件显示该文本
• v-slot:selection="{ items }"：这个插槽接收当前选中的项数组items，通过判断其长度，在有选中项时显示“已选择水果”，完全替换默认的选中标签展示

方案二：动态绑定label属性 #

如果不想用插槽，也可以通过动态计算label的方式实现，但需要注意这种方式会覆盖组件的默认label展示逻辑：

<template>
  <div>
    <v-select 
      v-model="selectedFruits" 
      :items="fruits" 
      :label="selectedFruits.length > 0 ? '已选择水果' : '选择水果'"
      multiple
      hide-details
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: 'Apple' },
        { name: 'Mango' },
        { name: 'Banana' },
        { name: 'Berries' },
        { name: 'Muskmelon' }
      ],
      selectedFruits: []
    }
  }
}
</script>

说明： #

• :label="..."：通过三元表达式动态切换label文本，选中时显示“已选择水果”，未选中时显示“选择水果”
• hide-details：可选，用来隐藏组件默认的下方提示文本，避免样式冲突

两种方案都能满足你的需求，推荐方案一，因为它更灵活，不会影响组件的其他默认行为。

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