在 Vue.js 中，我们经常需要使用下拉框来选择多个选项，这时候就需要用到 vue-multiselect 这个插件。vue-multiselect 是一个基于 Vue.js 的下拉框多选插件，它提供了非常方便的 API，可以轻松地实现下拉框多选功能。
安装 vue-multiselect
要使用 vue-multiselect 插件，需要先安装它。可以使用 npm 或 yarn 进行安装：
npm install vue-multiselect --save
yarn add vue-multiselect
使用 vue-multiselect
安装完成后，就可以在 Vue.js 项目中使用 vue-multiselect 了。首先需要在组件中导入 vue-multiselect：
import Multiselect from 'vue-multiselect'
然后在组件的 template 中使用 Multiselect 组件：
-- -------------------- ---- -------
----------
-----
------------
------------------
------------------
----------------
------------------------
------------------------
-----------------------
-----------------------
---------------
------
-----------在上面的代码中，我们使用了 v-model 将选中的选项绑定到了 selected 变量上，使用了 :options 属性设置下拉框的选项，使用了 :multiple 属性设置为多选模式，使用了 :close-on-select 和 :clear-on-select 属性分别设置为在选择后不关闭下拉框和不清空已选选项，使用了 :preserve-search 属性设置为保留搜索内容，使用了 placeholder 属性设置下拉框的提示文本。
示例代码
下面是一个完整的示例代码，演示了如何使用 vue-multiselect 实现下拉框多选功能：
-- -------------------- ---- -------
----------
-----
------------
------------------
------------------
----------------
------------------------
------------------------
-----------------------
-----------------------
---------------
------- -------- --------
------
-----------
--------
------ ----------- ---- -----------------
------ ------- -
----------- -
------------
--
------ -
------ -
--------- ---
-------- -
- ----- --- --- ------ - --
- ----- --- --- ------ - --
- ----- --- --- ------ - --
- ----- --- --- ------ - --
- ----- --- --- ------ - --
--
-
--
-
---------在上面的代码中，我们定义了一个选项数组 options，包含了五个选项，每个选项有一个名称和一个数值。在组件中使用了 Multiselect 组件，并将选中的选项绑定到了 selected 变量上。在模板中，我们使用了 pre 标签来展示选中的选项。
总结
使用 vue-multiselect 插件可以轻松地实现下拉框多选功能。在使用时，需要注意一些属性的设置，比如：multiple 表示是否启用多选模式，close-on-select 表示是否在选择后关闭下拉框，clear-on-select 表示是否在选择后清空已选选项等等。在实际开发中，可以根据需求进行灵活配置，实现更加丰富的下拉框多选功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/656c562ed2f5e1655d4b9f99