Vue-Element之带输入提示的操作人输入框

• 第一步：调用接口获取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;
}