要素内のコンポーネントel-autocompleteのリモート検索の完全一致とファジー一致

実際の開発プロジェクトでは、常に多くの予測不可能な状況があり、

たとえば、el-autocompleteのリモート検索では、検索はサーバーから開始されることが多く、その後、オブジェクトによって取得された関連する値が他のラベル要素に割り当てられます。一般に、あいまい一致は問題ありませんが、完全一致には問題があります(オブジェクトがサーバーから取得される場合)の値が他の要素に割り当てられている場合、dom要素は時間内に更新できません)


上記のページでは、Viter番号を検索して、関連するプロジェクト名とラダー番号、および登録コードを取得する必要があります。Viter番号は正確に一致する必要があるため、時間内に更新できない問題が発生し、特定のコードと解決策は次のとおりです。

< 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 = {};
もし のqueryString && のqueryString 長さ <= 50 ){
wtParams wtCode = queryString ;
getWtCode wtParams )。 次に (( res => {
var result = [];
もし 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 = "";
}
},


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

H-L
发布了8 篇原创文章 · 获赞 5 · 访问量 4万+

おすすめ

転載: blog.csdn.net/helenwei2017/article/details/80505365