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)
    			})
		},