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