Vue-multiselect 插件使用--搜索及单选下拉框

参考官网：https://vue-multiselect.js.org/#sub-select-with-search

1.通过npm安装vue-multiselect

npm install vue-multiselect 

2.引用

template中：注意这里的track-by是name，下面准备的数据的key也应该是name

<multiselect class="multiselect" v-model="value" :options="options" placeholder="请输入项目名称"
 label="name" track-by="name"></multiselect>

js中：

<script>
  import Multiselect from 'vue-multiselect'

  export default {
    name: "newproject",
    components: {
      Multiselect,
    },
    data() {
      return {
        value: [],
        options: [
          {name: '项目1'},
          {name: '项目2'},
          {name: '项目3'},
          {name: '项目4'},
        ]
      }
    },
  }

下载：https://github.com/shentao/vue-multiselect

引入css

<style src="../assets/dist/vue-multiselect.min.css"></style>

到此结束，查看效果：