- 第一步：調(diào)用接口獲取userList數(shù)組函荣；實現(xiàn)方法：在組件的data中設(shè)置
//采用mixin的條件下奔誓，僅需設(shè)置isGetUserList:true來調(diào)用獲取操作人列表的函數(shù)getUserList
isGetUserList:true,
//具體實現(xiàn)函數(shù)
getUserList(){
let body = {
mobile: '',
uid: '',
userName: '',
};
let url = this.common.App.rootPath + "/ocm/user/getUserList";
this.common.httpPost('',body,url)
.then(res => {
if(res.data.meta.code === 0){
this.userList = res.data.data;
}
})
.catch(err => {
console.log('獲取聯(lián)系人失斢卧馈：');
console.log(err);
})
},
- 第二步，頁面中采用el-autocomplete標(biāo)簽，
<el-form-item label="操作人：" class="item-33">
<el-autocomplete v-model="formData.operatorName" placeholder="請輸入"
:fetch-suggestions="showSuggestions" style="width:217px;"
:trigger-on-focus="false"></el-autocomplete>
</el-form-item>
showSuggestions(queryString,cb) {
//傳入的userList數(shù)組中渤刃，各對象需有userName字段
let arr = this.common.userSuggestions(queryString,this.userList);
cb(arr)
},
userSuggestions = (queryString, userList) => {
let arr = [], results = [];
if (queryString) {
arr = userList.filter((val) => {
let index = val.userName.indexOf(queryString.toLowerCase());
if (index !== -1) {
results.push({'value': val.userName, 'id': index,'uid':val.uid})
}
return (index !== -1);
});
}
//按相關(guān)度排序
results.sort((a, b) => {
return (a.id - b.id);
});
return results;
},
- 第三步：搜索時起愈，查詢并返回userName對應(yīng)的uid的值只恨，賦值給相應(yīng)的字段
if(obj.operatorName){
let userId = 0;
for(let val of this.userList){
if(val.userName === obj.operatorName){
userId = val.uid;
}
}
obj.applicantId = userId;
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
