实现效果图
这里需要通过用户的输入内容进行匹配相关的餐厅数据,下面一起来看下关键的实现代码。
关键代码
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