Vue.js 中使用 vue-multiselect 实现下拉框多选详解

在 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 组件：

// javascriptcn.com 代码示例
<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      :clear-on-select="false"
      :preserve-search="true"
      placeholder="选择一个或多个选项"
    ></multiselect>
  </div>
</template>

在上面的代码中，我们使用了 v-model 将选中的选项绑定到了 selected 变量上，使用了 :options 属性设置下拉框的选项，使用了 :multiple 属性设置为多选模式，使用了 :close-on-select 和 :clear-on-select 属性分别设置为在选择后不关闭下拉框和不清空已选选项，使用了 :preserve-search 属性设置为保留搜索内容，使用了 placeholder 属性设置下拉框的提示文本。

示例代码

下面是一个完整的示例代码，演示了如何使用 vue-multiselect 实现下拉框多选功能：

// javascriptcn.com 代码示例
<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options"
      :multiple="true"
      :close-on-select="false"
      :clear-on-select="false"
      :preserve-search="true"
      placeholder="选择一个或多个选项"
    ></multiselect>
    <pre>{{ selected }}</pre>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect,
  },
  data() {
    return {
      selected: [],
      options: [
        { name: '选项 1', value: 1 },
        { name: '选项 2', value: 2 },
        { name: '选项 3', value: 3 },
        { name: '选项 4', value: 4 },
        { name: '选项 5', value: 5 },
      ],
    }
  },
}
</script>

在上面的代码中，我们定义了一个选项数组 options，包含了五个选项，每个选项有一个名称和一个数值。在组件中使用了 Multiselect 组件，并将选中的选项绑定到了 selected 变量上。在模板中，我们使用了 pre 标签来展示选中的选项。

总结

使用 vue-multiselect 插件可以轻松地实现下拉框多选功能。在使用时，需要注意一些属性的设置，比如：multiple 表示是否启用多选模式，close-on-select 表示是否在选择后关闭下拉框，clear-on-select 表示是否在选择后清空已选选项等等。在实际开发中，可以根据需求进行灵活配置，实现更加丰富的下拉框多选功能。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656c562ed2f5e1655d4b9f99