简介
vue-bootstrap-multiselect 是一个基于 Vue.js 和 Bootstrap 的多选组件。它可以让用户从多个选项中选择一个或多个选项。
安装
首先，你需要安装 vue-bootstrap-multiselect。你可以使用 npm 或 yarn 来安装：
npm install vue-bootstrap-multiselect --save
或者
yarn add vue-bootstrap-multiselect
使用
使用 vue-bootstrap-multiselect 很简单。你只需要将它添加到你的 Vue 组件中，并将选项和值绑定到你的数据模型中。
-- -------------------- ---- -------
----------
-----
--------------------------
------------------
-------------------------
------------------- -----------
--
------
-----------
--------
------ ----------------------- ---- ----------------------------
------ ------- -
----------- -
------------------------
--
------ -
------ -
-------- -
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
---------------- ---
--
--
--
---------在上面的示例中，我们定义了一个选项列表，并将其绑定到 vue-bootstrap-multiselect 的 options 属性中。我们还使用 v-model 将选择的选项绑定到 selectedOptions 变量中。最后，我们还指定了一个占位符，当没有选项被选中时显示。
这是一个基本的用法示例，你可以根据需要进行更改和扩展。
API
vue-bootstrap-multiselect 组件提供了许多选项和事件，可以帮助你使用它的更加灵活。下面是一些常用的选项和事件：
props
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| options | Array<{ value: string, label: string }> | [] | 可选项列表。 |
| value | any[] | [] | 选中的值列表。如果指定了 v-model，则不需要设置此项。 |
| placeholder | string | null | 输入框的占位符。 |
| multiple | boolean | false | 是否允许多选。 |
| disableSearch | boolean | false | 是否禁用搜索。 |
| selectedLabel | string | 'Selected' | 选中项的标签。 |
events
| 名称 | 传入参数 | 描述 |
|---|---|---|
| input | any[] | 选中的值发生变化时触发。 |
| open | - | 下拉框打开时触发。 |
| close | - | 下拉框关闭时触发。 |
| removeOption | any | 当某个选项被移除时触发。 |
示例
以下是一个完整的示例，演示了如何使用 vue-bootstrap-multiselect。
-- -------------------- ---- -------
----------
-----
--------------------------
------------------
-------------------------
----------------
----------------------
------------------- -----------
--------------
----------------
------------------------------
--
------
-----------
--------
------ ----------------------- ---- ----------------------------
------ ------- -
----------- -
------------------------
--
------ -
------ -
-------- -
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
- ------ ---------- ------ ------- -- --
--
---------------- ---
--
--
-------- -
-------- -
--------------------- ----------
--
--------- -
--------------------- ----------
--
---------------------- -
------------------- --------------- -----------
--
--
--
---------结论
vue-bootstrap-multiselect 是一个简单而实用的多选组件。它可以帮助你快速构建复杂的表单，从而提高工作效率。希望这篇文章对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc281e8991b448dd1a6