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;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,014评论 19 139
  • 1、第八章 Samba服务器2、第八章 NFS服务器3、第十章 Linux下DNS服务器配站点,域名解析概念命令:...
    哈熝少主阅读 3,779评论 0 10
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,252评论 0 6
  • 常因景胜及时寻,只为情多不住吟。 难得一凭乘兴早,已然相对感怀深。 红花绿树三春意,白月碧云千里心。 每欲出游诗满...
    雪窗_武立之阅读 505评论 0 5