Vue Multiselect多选下拉框选中一项后自动关闭如何解决

你遇到的选中单个选项后下拉框自动关闭的问题，是Multiselect组件默认开启了选中即关闭下拉面板的逻辑，添加对应配置项即可解决：

适配vue-multiselect组件 #

主流Vue生态的vue-multiselect组件只需添加:close-on-select="false"属性，即可禁用选中自动关闭逻辑，支持选择任意数量选项后手动点击外部区域关闭下拉。
修改后完整代码如下：

<Multiselect
  v-model="abc"
  valueProp="xyz"
  label="userName"
  mode="multiple"
  placeholder="Select Recipients"
  class="multiselect-blue"
  :hideSelected="false"
  :options="recipients"
  :close-on-select="false"
>
</Multiselect>

其他组件库适配方案 #

如果你使用的是其他封装的Multiselect组件，查找对应配置项设置为false即可：

• Element Plus ElSelect：添加close-on-select="false"配置
• Ant Design Vue Select：添加@select事件阻止默认关闭逻辑，或通过open属性手动控制下拉显隐
• 自研组件：查找autoClose、closeAfterSelect等同理配置项修改

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