<template>
<multiselect
v-model="selected"
@input="updateSelected"
:options="phoneTypeOption"
label="title"
track-by="type"
:searchable="false"
:multiple="false"
:taggable="false"
selectLabel=""
deselectLabel=""
selectedLabel=""
placeholder="请选择"
>
</multiselect>
</template>
<script>
import Multiselect from "vue-multiselect";
export default {
data() {
return {
selected: [],//选中的值，option 的值是数组对象，selected就必须是[]
//下拉选项的option值，我这里使用的是数组对象，所有必须配置下面的两个属性
// label="title" track-by="type"这两个值对应option的title和type
phoneTypeOption:[
{title:"百度",type:1},
{title:"Google",type:2}
]
}
},
created() {
//通过生命周期添加option的默认值
let option = {
title:"百度",
type:1
};
this.selected.push(option);
},
components: {
Multiselect
}
};
</script>
//样式要引入，可以全局，也可以局部。看个人
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
解释一下：
- 关于option和v-model绑定的值用法。有2种：
1.1 是数组：option = ["百度","Google"]，selected = ""，
1.2 是数组对象：option = [{title:"百度",type:1},{title:"Google",type:2}]，selected = []。 - 关于设置默认值。
如果使用的是1.1，那使用生命周期，直接赋值：
created() {
this.selected = "百度";
}
如果使用的是1.2，那使用生命周期，赋值如下：
created() {
let option = {
title:"百度",
type:1
};
this.selected.push(option);
}
- multiselect的属性
3.1 @input 是选中事件的回调，有返回值；updateSelected是自定义方法
methods: {
updateSelected(value) {
//value 自定义参数接收返回值
console.log("当前选中的值：",value);
}
}
3.2 options 是下拉选项值
3.3 label options的值是数组对象时使用，label是显示选项名称，值为字符串
3.4 track-by options的值是数组对象时使用，track-by是显示选项的key，值为数字
3.5 searchable 是否可以搜索 Boolean值
3.6 multiple 是否多选 Boolean值
3.7 taggable 是否可标记 Boolean值
3.8 selectLabel 点击当前选项的提示 值为字符串
3.9 deselectLabel 删除当前选项的提示 值为字符串
3.10 selectedLabel 选中的提示 值为字符串
3.11 placeholder 提示占位符 值为字符串
5,7,8,9,10这几个属性因情况而使用，大部分情况是不需要使用的，至于什么时候用，视情况而定。
