在form表单中使用 iview select multiply 远程搜索

官方文档使用方法说明：iview select 远程搜索
1、使用方法—html

<form-item v-else label="机构" prop="multiplyMemberID" >
	<i-select :ref="memberRef" 
	   	:model.sync="elementForm.multiplyMemberID" 
	    filterable
	    v-bind:transfer=true
	    multiple
		remote
		@on-change="memberChangeMethod"
		:remote-method="memberRemoteMethod"
		label-in-value
		@on-query-change="onQueryChange"
	    not-found-text=''>
		<i-option v-for="(option,index) in memberList" :value="option.ID" :label="option.FullName" v-bind:key="option.ID">{{option.FullName}}</i-option>
	</i-select>
</form-item>

• 推荐使用model,sync，而不是v-model或:model
• v-bind:transfer = ture;避免options内容过多，被其他dom遮挡住，看不全。书写的方式不适用transfer = ture；是因为此方式有时不生效；
• @on-change：当选择的option发生改变时触发
• @on-query-change：当输入的查询字符串发生变化时触发（官方文档中没有看到API中有此方法，是在调试过程中发现的）
• remote-method：远程搜索的方法

2、使用方法—js

• 问题引入：第一次输入“z”，触发查询后台的方法，返回options1；删掉“z”，再次输入“z”，发现并不会触发远程搜索的方法。
• 问题分析：在输入框中两次输入相同的query值，首次会触发查询，第二次不会触发。
• 原因分析：是因为该组件源码中定义了，当发现本次输入的query和上次输入的query一样时，本次不会触发远程搜索。
• 问题解决：在每次输入查询的query字符的时候，把组件缓存的上次的query值清空。在input中输入字符时，会先触发@on-query-change方法，先执行在代码里定义的语句（lastRemoteQuery置空），然后进入源码中的本次和上次查询语句的比较，若不一致，则触发remote远程搜索，否则 不触发。

onQueryChange(val){
	this.$refs[this.memberRef].lastRemoteQuery = "";
	if(val == ''){
		this.memberList = [];
	}
},

源码

query: function query(_query) {
    var _this14 = this;

    this.$emit('on-query-change', _query);
    var remoteMethod = this.remoteMethod,
        lastRemoteQuery = this.lastRemoteQuery;

    var hasValidQuery = _query !== '' && (_query !== lastRemoteQuery || !lastRemoteQuery);
    var shouldCallRemoteMethod = remoteMethod && hasValidQuery && !this.preventRemoteCall;
    this.preventRemoteCall = false;

    if (shouldCallRemoteMethod) {
        this.focusIndex = -1;
        var promise = this.remoteMethod(_query);
        this.initialLabel = '';
        if (promise && promise.then) {
            promise.then(function (options) {
                (0, _newArrowCheck3.default)(this, _this14);

                if (options) this.options = options;
            }.bind(this));
        }
    }
    if (_query !== '' && this.remote) this.lastRemoteQuery = _query;
},

---

---

• 问题引入：后台查询返回的数据和options展示的数据不一致，
• 解决方法：options数组赋值的写法，需要加上_${query},当然在使用option的值时也需要特殊处理一下，option.label的值也可以不加query。
  

memberRemoteMethod(query){
	var flag = this.memberList.some(v=>v.FullName == query)
	if(query == ''){
		this.$refs[this.memberRef].setQuery(null);
		this.memberList = [];
	}
	clearTimeout(this.timer);
	this.memberList=[];
	var that = this;
	this.timer = setTimeout(function() {
	var obj = Action.postJson("CNSS_KEYSEARCH_SUBMEMBER",{keyword:query});
		if(obj.code == '200'){
			for(i=0;i<obj.result.length;i++){
				var objItem = obj.result[i];
		    	that.memberList.push({
	    			FullName:`${objItem.FullName}`,
	    			ID:`${objItem.ID}.${query}`,
	    			ParentId:`${objItem.ParentId}`,
	    			ParentName:`${objItem.ParentName}`,
	    			SearchType:`${objItem.SearchType}`,
	    			ShortName:`${objItem.ShortName}`,
	    			VirtualID:`${objItem.Virtual}`
	    		});
	    	}
		}else{
			that.$Message.error("检索二级机构失败！");
			that.memberList = [];
			that.$refs[this.memberRef].setQuery(null);
		}
	 }, 100);
},

memberChangeMethod(selectOP){
	if(selectOP.length==0){
		this.elementForm.multiplyMemberID = [];
		return;
	}
	var that = this;
	that.elementForm.multiplyMemberID.splice(0,that.elementForm.multiplyMemberID.length);
	for(i=0;i<selectOP.length;i++){
		var objItem = selectOP[i];
   		var value = objItem.value.split(".")[0];
   		that.elementForm.multiplyMemberID.push({
   			label:objItem.label,
   			value:value
   		});
	}
},

3、清空select中已选项

this.$refs[this.memberRef].setQuery(null);

---

如有问题，请指出，谢谢
如对您有帮助，可以点个赞哦