vue.js自定义select2指令并使用ajax远程获取值(包括鼠标滑动下拉分页)

在用vue做下拉框时想到了select2，但是直接使用的话不能成功，不能获取下拉框的值，然后就想到了封装select指令，废话不多说 直接上代码
//封装v-select指令
封装的directives.js代码

Vue.directive('select2', {
     	 inserted: function (el, binding, vnode) {
         let options = binding.value || {};
         //默认值开始
         var option;
         for (var d = 0; d < options.value.length; d++) {
        	    var item = options.value[d]; 
        	     option = new Option(item.text, item.id, true, true); 
        	     $(el).select2().append(option);
        }
        //默认值结束
        $(el).select2(
                {
        		 width:"100%",
                 placeholder          : "===请输入关键字===",
                 allowClear: false,
                 minimumInputLength   : 0,
                 ajax: {
                	 xhrFields: {
 	                    withCredentials: true
 	                },
                     url:options.url,
                     type : 'post',
                     dataType: 'json',
                     delay: 500, //延迟0.5s加载防止过度查询
                     data: function (params) {//参数
                         return {
                             keyword: params.term,//关键字
                             pagesize:10, 
                             currpage: params.page || 1,
                         };
                     },
                     processResults: function (data, params) {
                    	 var id=options.id;
                    	 var text=options.name;
                         var arr = [];
                         //根据自己返回的json值做出相应的修改
     					for(var i in data.result.list){
     						arr.push({id:data.result.list[i][id],text:data.result.list[i][text]});
     					}
                         return {
                             results: arr,
     						pagination: { //鼠标下拉是否显示更多的值
     							more: data.result.totalPage>(params.page||1)
     						  }
                         };
                     },
                     cache: false
                 },
                 escapeMarkup: function (markup) { return markup; }
                }
        ).on("select2:select", (e) => {
              el.dispatchEvent(new Event('change', { target: e.target })); 
              options && options.onSelect && options.onSelect(e);
        })//在网上查找很多代码都没有下边这几行，以至于多选的时候删除一个选中的时候selectValue值不变(这想了好几天)
        .on("select2:unselect", (e) => {
            el.dispatchEvent(new Event('change', { target: e.target })); 
            options && options.onSelect && options.onSelect(e);
         });
     
      },

      update: function(el, binding, vnode,oldVnode) {
    	  console.log(el);
    	  console.log(binding);
    	  console.log(vnode);
    	  console.log(oldVnode);
     	  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");
      }
    });

html代码

 






 





        
        

        结果：{
    { value }}
    


 

应一些人的要求在代码中加入了默认值的代码