Vue_el-autocomplete 根据输入内容查询对象列表提供建议

命运对每个人都是一样的,不一样的是各自的努力和付出不同,付出的越多,努力的越多,得到的回报也越多,在你累的时候请看一下身边比你成功却还比你更努力的人,这样,你就会更有动力。

导读:本篇文章讲解 Vue_el-autocomplete 根据输入内容查询对象列表提供建议,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

el-autocomplete 根据输入内容查询对象列表提供建议

实现效果图

    这里需要通过用户的输入内容进行匹配相关的餐厅数据,下面一起来看下关键的实现代码。
01
在这里插入图片描述

关键代码

    Html部分的设置如下:

                <el-autocomplete
                        v-model="restaurantItem"
                        prefix-icon="el-icon-search"
                        :fetch-suggestions="queryRestaurant"
                        placeholder="查询餐厅名称"
                        :trigger-on-focus="false"
                        @select="handleSelectRestaurant"
                ></el-autocomplete>

    当用户输入查询条件后将执行queryRestaurant方法,如果查询到了相关的信息将会绑定到restaurantItem对象。
    这时用户就可以通过弹出的建议列表来选择自己期望的目标,当用户选中餐厅名称后将执行handleSelectRestaurant方法,由于我这里获取到的是餐厅对象所以需要对对象内容做修改,并根据findIndex方法判断是否已添加到对象列表。

            // 从搜索框选择餐厅名称后
            handleSelectRestaurant(item) {
                item = JSON.parse(JSON.stringify(item).replace(/value/g, "name"));
                const indexItem = this.restaurantList.findIndex(items => items.code === item.code);
                if (indexItem > -1) {
                    this.$message({
                        message: '餐厅已添加,不必重复选择!',
                        type: "warning",
                        duration: 1200
                    });
                    return false;
                } else {
                    this.restaurantList.push(item);
                }
                console.log(this.restaurantList);
            }

文后总结

    整体控件由Vue封装使用起来很是方便,特别的一点是我这里获取的是餐厅对象数据,并在前端判断了对象是否存在于列表。荣幸与您分享~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/144234.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!