vue-multiselect插件使用

<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>

解释一下：

1. 关于option和v-model绑定的值用法。有2种：
   1.1 是数组：option = ["百度","Google"]，selected = ""，
   1.2 是数组对象：option = [{title:"百度",type:1},{title:"Google",type:2}]，selected = []。
2. 关于设置默认值。
   如果使用的是1.1，那使用生命周期，直接赋值：

created() {
  this.selected = "百度";
}

如果使用的是1.2，那使用生命周期，赋值如下：

created() {
  let option = {
     title:"百度",
     type:1
  };
  this.selected.push(option);
}

3. 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这几个属性因情况而使用，大部分情况是不需要使用的，至于什么时候用，视情况而定。

暂时就是这么多了，更加详细的用法，看文档。遇到坑再做补充