在项目中为何选择了bootstrap的bootstrap-select插件，因为相比其他下拉插件，这个插件更成熟，兼容性更好，也容易使用！
如何在Vue中封装成组件：
在项目中引入相应的bootstrap，与bootstrap-select的js与css
1、js：组件封装
Vue.component('vm-select',{
props:['options','value'],
template:"<select class='selectpicker' data-live-search='true' data-live-search-placeholder='搜索'><option :value='option.name' v-for='option in options'>{{option.name}}</option></select> ",
mounted:function(){
var vm=this;
$(this.$el).selectpicker('val',this.value!=null?this.value:null);
$(this.$el).on('changed.bs.select',function(){
vm.$emit('input',$(this).val());
if(typeof(vm.method)!='undefined'){
vm.method(vm.index,vm.childidx,this.value);
}
});
$(this.$el).on('show.bs.select',function(){
if(typeof(vm.load)!='undefined'){
vm.load(vm.index,vm.childidx);
}
})
},
watch:{
value(newV,oldV){
$(this.$el).selectpicker('val',newV);
}
},
updated:function(){
this.$nextTick(function(){
$(this.$el).selectpicker('refresh');
})
},
destroyed:function(){
$(this.$el).selectpicker('destroy');
}
})
到此，插件已经封装好了~
2、在html中使用 注意：在vue中要使用双向数据绑定，需要使用v-bind:属性，可省略为 :属性
<vm-select :options="appNameSelect" v-model="item.appName" ref="typeSelect" :disabled="bbool"></vm-select>
完成了~
可以根据项目需要，动态修改props参数和下拉菜单的循环数据结构，我的项目是传入的对象数组，所以……