element-plus 搜索下拉列表

突然的一个需求就是搜索下拉 但是之前用html原声写过一次 那个逻辑就很清晰 ,那么我们就演示一下如何使用 组件实现下拉

最终效果 

代码演示

1、这样就是一个简单的select+option实现的input搜索下拉列表显示的简单的一个模版

2、这样就会导致 只能选择搜索一次 第二次重新选择就会没有下拉列表 那么我用了blur事件来监听下拉缩回去的时候 就将值清空重新发起请求 这样就会出来了

3、但是还是会有一个问题 就是我们输入0或者1 或者没有的值搜索的时候就会 清空输入框 并且立刻缩回去  

原因:因为输入框如果没有发请求的时候会返回一个null那么下拉列表就没东西了 所以就为空了

解决:

  当用户输入 0 或者没有的值的时候 就判断一下 如果返回数据为空 就将input 的值为空 重新发起请求 这样列表就又出来了

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值