el-autocomplete 使用

最新推荐文章于 2026-04-05 02:14:49 发布

原创最新推荐文章于 2026-04-05 02:14:49 发布 · 1.7k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

前端专栏收录该内容

7 篇文章

订阅专栏

该文章描述了如何在Vue.js应用中使用el-autocomplete组件，通过v-model绑定输入值，利用fetch-suggestions调用searchNameNick方法获取昵称列表。当用户选中建议项时，handleSelect方法被触发。搜索函数中，根据用户输入关键字查询接口，处理并返回数据，确保回显的数据格式正确以支持显示。

1.实现效果:将输入的值传到获取昵称列表的接口中，获取到相关昵称列表，进行回显。

2.实现步骤

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

v-model="namenick" 输入的值通过namenick展示

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

注意：功能完成。
需要注意的是回显的值必须是一个对象数组，且对象属性名称是 “value”，不然回显失败
queryString, callBack这俩个参数也是组件自己的，callBack是一个方法，用来resolve结果；queryString是用户输入的关键字。