el-autocomplete匹配搜索使用

1.添加元素
<el-autocomplete
             v-model="text"
             :fetch-suggestions="fetchPoint"
             placeholder="输入内容"
     >
</el-autocomplete>
2.js代码
fetchPoint(name, callback) {
                this.$data.loading += 1;
                let list = [{}];
                api
                    .get('/api/website/publictransportation/map',{
                        params: assignIn({}, {name: name})
                    }).then((response) => {

                        let map = response.data;

                        for(let key in map) {
                            list.push({key: key, value:map[key]});
                        }

                        callback(list);
                    })
                    .finally(() => {
                        this.$data.loading -= 1;
                    });
            }

在输入框输入查询值时,会传递给name,后台根据name查询结果返回并回显给下拉列表。注意:list.push({key: key, value:map[key]});这里需要有一个value名(默认为value),有需要可以更改这个名称。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值