自定义vue-multiselect：下拉显编码与文本，选中仅展示编码

直接通过组件提供的自定义插槽即可实现需求，以下是完整实现代码：

模板部分 #

<template>
  <div>
    <multiselect
      v-model="selectedItem"
      :options="options"
      track-by="code"
      label="text"
    >
      <!-- 自定义下拉选项显示：同时展示编码与文本 -->
      <template slot="option" slot-scope="props">
        {{ props.option.code }} - {{ props.option.text }}
      </template>

      <!-- 自定义选中标签显示：仅展示编码 -->
      <template slot="tag" slot-scope="props">
        {{ props.option.code }}
      </template>
    </multiselect>
  </div>
</template>

脚本部分 #

<script>
import Multiselect from 'vue-multiselect'
import 'vue-multiselect/dist/vue-multiselect.min.css'

export default {
  components: {
    Multiselect
  },
  data() {
    return {
      selectedItem: null,
      options: [
        { code: 1002, text: 'A' },
        { code: 2001, text: 'B' },
        { code: 1, text: 'C' }
      ]
    }
  }
}
</script>

关键说明 #

• slot="option" 插槽：控制下拉列表中每个选项的展示样式，这里将编码与文本拼接显示。
• slot="tag" 插槽：专门定义选中后标签的内容，这里仅渲染编码字段。
• track-by="code"：指定选项的唯一标识（code字段唯一），确保组件能正确识别和区分不同选项。
• label="text"：作为组件默认的标签字段 fallback，不会影响自定义插槽的显示效果。

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