vue+element el-autocomplete el-select远程搜索

   el-autocomplete

<el-form-item label="所属机构" prop="organName" class="mar-b-25">
         <el-autocomplete 
                  v-model.trim="rolesForm.organName" 
                  :trigger-on-focus="false" 
                   :fetch-suggestions="querySearch" 
                   placeholder="请输入机构名称" 
                   @select="selectHandle" 
                   @blur="blurHandle"
                   style="width: 280px;">
        </el-autocomplete>
</el-form-item>

   data () {
        return {
            //角色信息表单
            rolesForm: {
                   roleName: '',
                aliveFlag: '',
                roleType: '',
                organName: '',
                organId: '',
            },
            originOrganName: '',//把一开始从列表进来后的机构名称保存起来，用于在修改所属机构不在系统列表时候，重新用这个赋值回所属机构
            timeout: '',//远程搜索机构的定时器
            organNameList: [],//远程搜索机构结果列表
        }





方法：

         //查询机构过滤
          createStateFilter(queryString) {
            return (list) => {
                return (list.name.indexOf(queryString) >= 0);
            }
          },
        //queryString 为在框中输入的值
        //callback 回调函数,将处理好的数据推回
        querySearch(queryString, callback) {
            let params = {
                ssxt: this.ssxt,
                pageSize: 50,
                name: this.rolesForm.organName,
                aliveFlag: 'Y'
              }
              //这里调用查询机构的接口
            if(this.rolesForm.organName){
                this.$api.organStructure.organ.getList(params)
                    .then( res => {
                        let data = res.data.data;
                        if(res.data.retcode === this.SUCCESS_CODE){
                            //在这里为这个数组中每一个对象加一个value字段, 因为autocomplete只识别value字段并在下拉列中显示
                            data.rows.forEach( (item , index) => {
                                item.value = item.name;//将想要展示的数据作为value
                            })
                              let restaurants = this.organNameList = data.rows;
                            let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                            //先清理定时器
                            clearTimeout(this.timeout);
                            this.timeout = setTimeout(() => {
                                callback(results);
                            }, 100 * Math.random());
                        }else{
                            this.$message({
                                type: 'error',
                                message: res.data.retmsg
                            })
                        }
                    }).catch( err => {
                        callback([]);//如果搜索不到数据需要传空   才会隐藏下拉框
                          return;
                    })
            }
        },
        //选择机构和失去焦点的时候调用查询机构
        getOrganName(){
            let params = {
                ssxt: this.ssxt,
                pageSize: 50,
                aliveFlag: 'Y'
              }
            this.$api.organStructure.organ.getList(params)
                .then( res => {
                    let data = res.data.data;
                    if(res.data.retcode === this.SUCCESS_CODE){
                        let nameArrList = [];
                        data.rows.forEach( (item , index) => {
                            nameArrList.push(item.name);
                        })
                        if(nameArrList.indexOf(this.rolesForm.organName) < 0){
                            //如果输入的值不在机构列表中，那么会清空或者提示错误或者恢复原始值
                            this.$message({
                                type: 'error',
                                message: '输入的机构不在系统机构内，请重新输入或者保持不变!'
                            })
                            this.rolesForm.organName = this.originOrganName;
                            alert('false')
                            return false;
                        }else{
                            alert('true')
                            return true;
                        }
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.retmsg
                        })
                    }
                }).catch( err => {
                    console.log(err)
                })
        },
        //选择机构
          selectHandle(item) {
            this.rolesForm.organId = item.id;
          },
          //所属机构失去焦点的时候也要判断是否包含，如并不包含，那么就恢复原来的机构或者清空
          blurHandle(item){
           this.getOrganName();
          },

 

以下是el-select

   <el-select v-model.trim="domain.roleName" value-key="id" :disabled="domain.disabled" 
		 @change="changeHandle" @focus="focusHandle(index)" 
		 filterable placeholder="请选择">
		     <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item"></el-option>
   </el-select>

data(){return{
   options: [],//机构配置
}}

        //选中机构下拉获取id
		changeHandle(id){
			this.rolesForm.organId = id
		},
		//机构获取焦点时获取机构列表
		focusHandle(val){
			let params = {           
				ssxt: this.ssxt,
				pageSize: 50,
				aliveFlag: 'Y'
  			}                                      
        	this.$api.organStructure.organ.getList(params)
    			.then( res => {
    				let data = res.data.data;
    				if(res.data.retcode === this.SUCCESS_CODE){
    					let nameArrList = [];
    					data.rows.forEach( (item , index) => {
    						nameArrList.push(item.name);
    					})
    					this.organList = data.rows;
    				}else{
			    		this.$message({
			    			type: 'error',
			    			message: res.data.retmsg
			    		})
    				}
    			}).catch( err => {
		    		console.log(err)
    			})
		},

 

 

转载于:https://my.oschina.net/parchments/blog/3079439