el-autocomplete usa

1. Efeito de conquista: Passe o valor de entrada para a interface para obter a lista de apelidos, obtenha a lista de apelidos relacionada e faça eco dela.

 2. Etapas de implementação

<el-autocomplete v-model="namenick" :fetch-suggestions="searchNameNick"         
  placeholder="请输入内容" :trigger-on-focus="false" @select="searchNickhandle">
</el-autocomplete>

v-model="namenick" O valor inserido é exibido por namenick

:fetch-suggestions="searchNameNick" : Retorna o método de obtenção dos dados, ou seja, a caixa de entrada recebe o foco uma vez. Este método será chamado automaticamente para obter os dados.

select="handleSelect" : Este método é chamado quando uma sugestão é selecionada.
 

 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++) {
                    console.log('111');
                    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: '请求失败'
            });
        }
    },

NOTA: Recurso completo.
Deve-se observar que o valor ecoado deve ser um array de objetos e o nome da propriedade do objeto é "valor", caso contrário, o eco falhará
queryString, callBack esses dois parâmetros também são o próprio componente, callBack é um método usado para resolver o resultado ; queryString é a palavra-chave digitada pelo usuário.