摘要:vue select2 搜索 多选
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
/* select2封装*/
Vue.directive('select2', {
inserted: function (el, binding, vnode) {
let options = binding.value || {};
$(el).select2(options).on("select2:select", (e) => {
// v-model looks for
// - an event named "change"
// - a value with property path "$event.target.value"
el.dispatchEvent(new Event('change', {target: e.target}));
});
},
update: function (el, binding, vnode) {
for (var i = 0; i < vnode.data.directives.length; i++) {
if (vnode.data.directives[i].name == "model") {
$(el).val(vnode.data.directives[i].value);
}
}
$(el).trigger("change");
}
});
<select class="form-control select" v-select2="" v-model="OtherUsers" multiple="multiple">
<template v-for="User in UserLists">
<option :value="User.Id">{{ User.DisplayName }}</option>
</template>
</select>
其中如果去除 multiple="multiple" 就会变成搜索框的,添加上就是多选的
<style type="text/css">
.select2-selection__choice{
background-color:#367fa9!important;
border:#367fa9!important;
padding: 1px 10px!important;
color: #fff!important;
}
.select2-selection__choice__remove{
color: rgba(255,255,255,0.7)!important;
}
</style>
效果可以出来,但是数据不行,会是空的,此时使用JQ将数据手动赋给对应的参数即可
$('#oceania_multi').val();
这样还会有问题,选择其他的input也会然多选框出问题,一下是处理后的版本
/* select2封装*/
Vue.directive('select2', {
inserted: function (el, binding, vnode) {
var options = binding.value || {};
//$(el).select2(options).on("select2:select", (e) => {
//el.dispatchEvent(new Event('change', {target: e.target})); //双向绑定操作,其中在火狐 谷歌中可以正常使用在IE中无法实现自动的绑定,需要后续进行手动绑定数据操作
//});
$(el).select2(options).on("select2:select", function (e) { });
},
//以下请勿删除(防止IE下出现问题无法还原)
//update: function (el, binding, vnode) {
//for (var i = 0; i < vnode.data.directives.length; i++) {
//console.log(vnode.data.directives[i].name);
//if (vnode.data.directives[i].name == "select2") {
// $(el).val(vnode.data.directives[i].value);
// console.log(vnode.data.directives[i].value);
//}
//}
//$(el).trigger("change");
//}
});
var defaultStringData = $('.select2-selection__rendered').text();
var defaultStringArr = defaultStringData.split('×');
var formatStringData = defaultStringArr.join(',');
this.AllReasonStr = formatStringData.replace(/^(\s|,)+|(\s|,)+$/g, '');
直接去获取div中的数据,然后进行操作,不使用双向绑定