如何修改Vue Multiselect组件中‘1 option selected’的显示文本

你可以通过以下几种方式修改默认的“1 option selected”提示文本：

1. 直接设置固定自定义文本 #

利用组件的selected-label属性，直接传入你想要的文本：

<Multiselect
  v-model="filter.organization"
  :options="Object.values(organizations)"
  placeholder="ORGANISATION"
  :searchable="true"
  mode="multiple"
  :close-on-select="false"
  :clear-on-select="false"
  selected-label="已选择组织"
/>

2. 根据选中数量动态生成文本 #

如果需要根据选中项的数量动态调整提示内容，可以绑定计算属性：

<template>
  <Multiselect
    v-model="filter.organization"
    :options="Object.values(organizations)"
    placeholder="ORGANISATION"
    :searchable="true"
    mode="multiple"
    :close-on-select="false"
    :clear-on-select="false"
    :selected-label="customSelectedText"
  />
</template>

<script setup>
import { ref, computed } from 'vue'
import Multiselect from '@vueform/multiselect' // 请确保引入对应的组件

const filter = ref({
  organization: []
})

const customSelectedText = computed(() => {
  const count = filter.value.organization.length
  return count ? `已选择 ${count} 个组织` : ''
})
</script>

3. 复用占位符文本作为提示 #

如果希望选中后显示和占位符一致的内容，直接将selected-label绑定为占位符的值：

<Multiselect
  v-model="filter.organization"
  :options="Object.values(organizations)"
  placeholder="ORGANISATION"
  :searchable="true"
  mode="multiple"
  :close-on-select="false"
  :clear-on-select="false"
  :selected-label="placeholder"
/>

4. 插槽实现完全自定义显示 #

如果需要更灵活的自定义（比如添加样式、图标），可以使用selected插槽：

<Multiselect
  v-model="filter.organization"
  :options="Object.values(organizations)"
  placeholder="ORGANISATION"
  :searchable="true"
  mode="multiple"
  :close-on-select="false"
  :clear-on-select="false"
>
  <template #selected="{ values }">
    <span v-if="values.length === 0">ORGANISATION</span>
    <span v-else>已选择 {{ values.length }} 个组织</span>
  </template>
</Multiselect>

注意：不同版本的Vue Multiselect属性/插槽可能有差异，如果上述配置不生效，可查看你使用的组件版本的官方文档确认对应配置项。

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