当前位置:   article > 正文

element-plus 搜索下拉列表_el plus 下拉输入框

el plus 下拉输入框

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

最终效果 

代码演示

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

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

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

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

解决:

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/229216?site
推荐阅读
相关标签
  

闽ICP备14008679号