<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="請(qǐng)輸入內(nèi)容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>
// :fetch-suggestions="searchNameNick" ： 返回獲取到數(shù)據(jù)的方法，也就是說(shuō)輸入框一獲取焦點(diǎn)。就會(huì)自動(dòng)調(diào)用該方法拿到數(shù)據(jù)。
// select="handleSelect" ： 當(dāng)選中建議項(xiàng)時(shí)，調(diào)用該方法。
async searchNameNick(queryString, callBack){
       //整理參數(shù)
        const params ={
            nickname:queryString,
            sys_code:4,
            page:1,
            page_size:100
        }
        // 定義空數(shù)組來(lái)接收返回的數(shù)據(jù)
        let nicknameList = []
        let res = await this.$proxy({
            url: `xxxx`,
            method: 'get',
            params
        })
        if(res.code == 0){
            //如果搜索結(jié)果為空返回“無(wú)匹配結(jié)果”
            if(res.data.items.length == 0){
                nicknameList.push({
                    value :"無(wú)匹配結(jié)果",
                    id : -1
                })
                callBack(nicknameList)
            }else{
            //對(duì)獲取的值進(jìn)行遍歷，調(diào)整數(shù)據(jù)結(jié)構(gòu)，value
                for (let i = 0; i < res.data.items.length; i++) {
                    //需要注意的是回顯的值必須是一個(gè)對(duì)象數(shù)組，且對(duì)象屬性名稱是 “value”，不然回顯失敗
                    nicknameList.push({
                        value: res.data.items[i].nickname,
                        id: res.data.items[i].user_id
                    })
                }
                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    callBack(nicknameList)
                    //通過(guò)callBack函數(shù)將回顯數(shù)據(jù)返回
                }, 1000)
            }
        }else{
            this.$message({
                type: 'error',
                message: '請(qǐng)求失敗'
            });
        }
    },
     searchNickhandle(item) {
            if (item.id !== -1) {
                console.log(item.id, '昵稱點(diǎn)擊回調(diào)');
                this.user_id = item.id
            }
        },

<el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="請(qǐng)輸入關(guān)鍵詞"
      :remote-method="remoteMethod"
      :loading="reqLoading"
    >
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    export default {
     data () {
         return {
           value: '',
           reqLoading: false,
           options: []
         }
     },
     methods: {
        remoteMethod (query) {
          if (query !== '') {
            this.reqLoading = true
            setTimeout(() => {
              this.reqLoading = false
              this.options = [{label: '答案cp3',value: '答案cp3'}]
            }, 200)
          } else {
            this.options = []
          }
        }
    }