在前端开发中，经常需要使用多选下拉框这个组件，在 Vue.js 中实现也非常简单，本文将介绍如何使用 multiselect 插件来实现多选下拉框功能。
什么是 multiselect？
multiselect 是一个开源的 Vue.js 组件，它可以将一个普通的下拉框转化为多选下拉框。使用 multiselect 可以让用户方便地选择多个选项，从而提高了用户体验。
如何引入 multiselect？
首先，我们需要引入 multiselect 插件。你可以使用 npm 安装 multiselect，或者将其引入到 Vue.js 项目中。以下是使用 npm 安装的方法：
--- ------- -------------------- ------
在你的 Vue.js 组件中引入 multiselect，例如：
------ ----------- ---- ---------------------- ------ ------- - ----------- - ----------- - -
如何使用 multiselect？
使用 multiselect 很简单，首先我们需要在模板中使用它：
---------- ------------ --------------- -------------------------------- -----------
在上面的代码中，我们首先定义了一个变量 fruit，它用来存放用户选择的水果。然后，我们使用了 multiselect 组件，通过 v-model 来绑定 fruit 变量，将用户的选择与变量同步。我们还需要传递一个 options 属性，该属性包含了所有可供选择的水果。
接着，我们在 Vue.js 的 script 中定义变量 fruits：
------ ------- -
------ -
------ -
------ ---
------- -
--------
---------
---------
---------
------------
-
-
-
-在上面的代码中，我们定义了一个 fruits 数组，包含了所有可供选择的水果。我们还定义了一个 fruit 变量，它用来存放用户选择的水果。
到此为止，我们就完成了 multiselect 的基本用法。用户在多选下拉框中选择的水果会自动保存到 fruit 变量中。
如何自定义 multiselect？
如果你想要自定义 multiselect，比如改变下拉框的样式或者添加一个搜索框，你可以使用 multiselect 提供的一些属性和插槽。
例如，要添加一个搜索框，我们可以在模板中添加一个 v-slot:search 标签：
----------
------------ --------------- ------------------
--------- --------------
------ ----------- --------------------- ------------------- --
-----------
--------------
-----------在 above code 中，我们在 multiselect 标签内使用了一个插槽，插槽的名称是 search。该插槽包含了一个普通的输入框，用来实现搜索功能。我们还需要定义一个 searchQuery 变量，用来保存搜索关键字。然后，在 Vue.js 的 script 中添加如下代码：
------ ------- -
------ -
------ -
------ ---
------- -
--------
---------
---------
---------
------------
--
------------ --
-
--
--------- -
---------------- -
------ ------------------------ -- -
------ ------------------------------------------------------------
--
-
-
-在 above code 中，我们定义了一个 filteredFruits 计算属性，该属性根据搜索关键字来过滤可供选择的水果。我们在 filter() 函数中比较了每个水果和搜索关键字是否匹配，如果匹配则返回该水果。
这样，我们就实现了一个具有搜索功能的多选下拉框。
总结
multiselect 是一个非常实用的 Vue.js 组件，可以帮助我们快速实现多选下拉框。在上面的代码中，我们介绍了 multiselect 的基本用法，并且使用插槽和计算属性来实现了自定义功能。
通过本文的学习，相信你已经能够轻松地在 Vue.js 项目中使用 multiselect 来实现多选下拉框了。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6519c58295b1f8cacd1e29b9