vue-select 组件

场景

. vue组件开发的时候,传统的select2方式已经不可以使用了

解决

sagalbot/vue-select

参考文档

https://github.com/sagalbot/vue-select

安装

cdn

引入插件

<!-- use the latest release -->
<script src="https://unpkg.com/vue-select@latest"></script>
<!-- or point to a specific release --><script src="https://unpkg.com/vue-select@1.3.3"></script>

注册组件
Vue.component(‘v-select’, VueSelect.VueSelect);

npm

引入插件 && 注册组件

npm install vue-select
import Vue from ‘vue’
import vSelect from ‘vue-select’
Vue.component(‘v-select’, vSelect)

用法

• 简单用法
  
  • 用法见下面的列子
  • 注意 product得到是整个item {label: 'foo', value: 'Foo'}
    . 高级用法(ajax)

<v-select :options="[{label: 'foo', value: 'Foo'}, {label:'bar', value:'Bar'}]" v-model="product"></v-select>