- 第一步：调用接口获取userList数组；实现方法：在组件的data中设置
//采用mixin的条件下，仅需设置isGetUserList:true来调用获取操作人列表的函数getUserList
isGetUserList:true,
//具体实现函数
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('获取联系人失败：');
console.log(err);
})
},
- 第二步，页面中采用el-autocomplete标签，
<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数组中，各对象需有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);
});
}
//按相关度排序
results.sort((a, b) => {
return (a.id - b.id);
});
return results;
},
- 第三步：搜索时，查询并返回userName对应的uid的值，赋值给相应的字段
if(obj.operatorName){
let userId = 0;
for(let val of this.userList){
if(val.userName === obj.operatorName){
userId = val.uid;
}
}
obj.applicantId = userId;
}
