element中组件el-autocomplete远程搜索之精确匹配和模糊匹配

在实际开发项目中总是会遇到很多难以预测的情况，

比如el-autocomplete的远程搜索时，经常会从服务器发起搜索，然后把对象带出的相关值赋给其他标签元素，一般模糊匹配没问题，但是精确匹配会存在一个问题（当从服务器获取到对象的值赋给其他元素时，dom元素不能及时更新问题）

以上页面需要通过搜索维特号然后带出相关的项目名称和梯号以及注册代码，因为这里维特号需要精确匹配，就会出现不能及时更新的问题，具体代码以及解决办法如下

<el-autocomplete :trigger-on-focus="false" v-model="deviceForm.wtCode" :fetch-suggestions="wtCodeQuerySearchAsync" placeholder="请输入搜索内容"

@select="handleWtCodeSelect" style="width: 75%;"></el-autocomplete>

// 模糊查询

wtCodeQuerySearchAsync(queryString, cb) {

var wtParams = {};

if (queryString && queryString.length <= 50) {

wtParams.wtCode = queryString;

getWtCode(wtParams).then((res) => {

var result = [];

if (res.obj) {

var obj = {};

obj.value = res.obj.wtCode;

obj.uuid = res.obj.evId;

obj.projectName = res.obj.projectName;

obj.evOrder = res.obj.evOrder;

obj.regCode = res.obj.regCode;

result.push(obj);

} else {

result.push({

uuid: '-1',

value: '未搜索到结果！'

})

}

clearTimeout(this.timeout);

this.timeout = setTimeout(() => {

cb(result);

}, 100 * Math.random());

}).catch(_ => {});

}

},

// 选择然后给其他dom元素赋值

handleWtCodeSelect(item) {

// console.log(item);

if (item.uuid != -1) {

this.evId = item.uuid;

this.deviceForm.projectName = item.projectName;

this.deviceForm.evOrder = item.evOrder;

this.deviceForm.regCode = item.regCode;

//此处需要特别注意：当精确匹配查询时，当选中建议项时，需要把该对象的值赋给其他元素，

//页面数据不会马上更新，当再次点击输入框使输入框值有所变化时，页面数据才会更新出来,目前的解决办法为重新给输入值赋值时加上一个""

this.deviceForm.wtCode = item.value + " ";

} else {

this.deviceForm.wtCode = "";

}

},

以上为实际工作中遇到的问题，然后记录下来，如果大家也有遇到同样的问题，并且有更好的方法，欢迎大家分享