利用element-ui实现远程搜索两种实现方式

<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>
// :fetch-suggestions="searchNameNick" ： 返回获取到数据的方法，也就是说输入框一获取焦点。就会自动调用该方法拿到数据。
// select="handleSelect" ： 当选中建议项时，调用该方法。
async searchNameNick(queryString, callBack){
       //整理参数
        const params ={
            nickname:queryString,
            sys_code:4,
            page:1,
            page_size:100
        }
        // 定义空数组来接收返回的数据
        let nicknameList = []
        let res = await this.$proxy({
            url: `xxxx`,
            method: 'get',
            params
        })
        if(res.code == 0){
            //如果搜索结果为空返回“无匹配结果”
            if(res.data.items.length == 0){
                nicknameList.push({
                    value :"无匹配结果",
                    id : -1
                })
                callBack(nicknameList)
            }else{
            //对获取的值进行遍历，调整数据结构，value
                for (let i = 0; i < res.data.items.length; i++) {
                    //需要注意的是回显的值必须是一个对象数组，且对象属性名称是 “value”，不然回显失败
                    nicknameList.push({
                        value: res.data.items[i].nickname,
                        id: res.data.items[i].user_id
                    })
                }
                clearTimeout(this.timeout)
                this.timeout = setTimeout(() => {
                    callBack(nicknameList)
                    //通过callBack函数将回显数据返回
                }, 1000)
            }
        }else{
            this.$message({
                type: 'error',
                message: '请求失败'
            });
        }
    },
     searchNickhandle(item) {
            if (item.id !== -1) {
                console.log(item.id, '昵称点击回调');
                this.user_id = item.id
            }
        },

<el-select
      v-model="value"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :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 = []
          }
        }
    }