ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）

最新推荐文章于 2024-03-28 23:06:23 发布
VIP文章 最新推荐文章于 2024-03-28 23:06:23 发布
阅读量1.6k 收藏 2
点赞数
分类专栏： 前端 html 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61083409/article/details/123345185
版权

今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了

在这里插入图片描述
查了一下，是因为有element-ui源码有bug，主要原因是

最低0.47元/天 解锁文章
m0_61083409
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
google-autocomplete：Google自动完成Vue组件
02-04
Google自动完成 我之所以分享这个组件，是因为我不胜枚举复杂的示例来完成这项简单的工作。 因此，在解释过程中，我将尽量做到简单。 Google Autocomplete组件不过是官方Google Places API的Vue.js包装器。 尽管使用Vue.js编写了演示，但可以从任何JS框架提取Autocomplete对象。 要求 您将必须安装Vue＆Vuemit： npm install vue -- save npm install vuemit -- save 用于管理google组件与其父组件之间的事件。 注意：如果碰巧正在使用Vue 1.* ，则必须从分支中拉出。 演
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
官网的demo献上 在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock中所有学生的学号信息，根据输入的数据来远程查找目标，并且在选中该目标后能够自动填充对应的姓名、生日、手机等信息，实现快速获取信息的功能，再也不用手动一个个去输入所有的数据啦～ 在template中添加el-autocomplete <el-autocomplete placeholder="请输入studentID" v-mo
element-ui autocomplete 组件源码分享
最新发布
qq_37309987的博客
03-28 1213
紧接着 input 组件的源码，分享带输入建议的 autocomplete 组件，在 element-ui 官方文档上，没有这个组件的 api 目录，它的 api 是和 input 组件的 api 在一起的，看完源码之后发现，源码当中 autocomplete 组件是一个单独的组件，进而在此做单独的简单分享。主要从以下五个方面来分享。2.17 highlight-first-item 属性，是否默认突出显示远程搜索建议中的第一项，类型 boolean，默认 false。
element-ui的el-autocomplete不显示下拉框中的数据
caoyuna1998的博客
05-18 1606
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
elementui el-autocomplete 当输入建议调用了接口后为空时，输入建议的下拉框一闪而过然后为空，去掉这个状态的解决方法
未末的博客
06-11 5379
如图所示，要实现在没有数据的时候就不要闪下面这个加载中， 解决方法步骤： 1.el-autocomplete自带的属性 debounce(输入建议的去抖延时),把它设为0 2.写自定义样式让所有下拉列表隐藏：.el-autocomplete-suggestion{display:none;} 3.在querySearch函数中让数据不为空的下拉列表显示（实现方法是通过自定义class名，然后让指定的class显示） 代码如下 <el-autocomplete pop.
el-autocomplete解决不显示下拉框列表问题
Charonmomo的博客
12-23 2603
如图所示, 控制台中可以看到 results 中已经有了数据, 但是 cb(results) 却不能在网页中显示. 产生原因: element-ui对于返回数据的格式有要求，必须是一个数组对象，并且属性名为“value”，将results中的属性名换成value就可以了. 参考: 添加链接描述 ...
elementUi 中的 el-autocomplete 组件不显示下拉框中建议的值怎么解决
不知名人士的博客
03-31 2907
明明按照官方文档的例子稍微改造了一下，但是下拉框中的内容就是出不来，什么问题？？ 解决方法： 这个 value-key 属性的默认值是 value，你的键名不一定是叫value，改成你自己对应的就可以了。 ...
element-ui的el-autocomplete不显示下拉框中的值
热门推荐
要优秀！
04-03 1万+
如图：下拉框中的数组的内容全部获取到了，但是内容就是不显示。 解决：这是el-autocomplete的一个坑，el-autocomplete显示的时候必须有value字段，可以在返回的对象里面手动添加一个value属性， item.value = item.name; 备注：如果一开始显示的时候也没有列表项，也是手动添加value属性。 ...
vue element ui el-autocomplete模糊查询功能
Lhy_JL的博客
09-11 737
相关的控件属性 方法参考：https://element.eleme.cn/#/zh-CN/component/input 需要注意的是：el-autocomplete中数组值的结构必须是{value:'值'，·····} value 所对应的就是：下拉列显示的文本， 所以你发现后台请求到了数据，但是组件下拉列空白，就说明你需要数据格式化一下，将要显示的内容的key 改为value！ ...
element el-autocomplete数据不显示问题
jam476的专栏
01-29 3428
element el-autocomplete数据不显示问题
element-ui的下拉选择框选中内容无效果，删除无效果
Fray_Zyt的博客
03-11 4319
原理：其实都有生效的，只是页面没有刷新，展现不出来，我们则可通过强制刷新即可，具体代码如下： <el-select style="width: 95px;" v-model="xxx.xxxx" clearable placeholder="请选择" @change="handleChange"> <el-option v-for="item in list" :key="item.index" :label="item.name" :value="item.name">
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Element-UI之＜el-autocomplete＞标签在输入框输入匹配不到下拉列表中内容
weixin_44839328的博客
02-03 2334
功能需求： 查到另一张表的“姓名”字段，在输入框下有下拉框 可以输入，自动匹配下拉列表中的字段 鼠标点击在输入框，下拉列表出现 实现 使用Element-UI前端模板 ，< el-autocomplete> 之 “自定义模板” 标签 复制到代码中后，在输入框输入 “三” 之后，下拉列表中不能匹配到下拉框中字段 解决 过滤方法中,这里是=== 0，indexOf（）方法是返回包含的位置，并不是存在===0，不存在===-1 restaurant.crewName.indexOf(que
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
小太阳的博客
10-21 8591
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
关于element-ui中el-autocomplete使用:fetch-suggestions内容不显示的问题
weixin_46267824的博客
06-13 1422
关于解决element-ui带输入建议的输入框内容不显示的问题
vue+elementUi 下拉框初始化默认值后，点击切换其他选项没有反应
weixin_42554987的博客
09-20 2466
vue+elementUi 下拉框初始化默认值后，点击切换其他选项没有反应 示例代码如下： <body> <div id="app"> <el-select v-model="message.type" placeholder="请选择"> <el-option v-for="item in options" :key="item...
Vue el-select下拉框选择成功时不显示，但是当选择其他下拉框的时候，又可以成功显示
m0_48557659的博客
02-28 1708
change事件的，这个是我解决后加上的，现在遇到的bug,并不是通过this.form.*设置的，所以不是$set的问题。这个问题我只，也遇到过，想看的可以看一下。，今天我又遇到了，先看一下代码部分。
el-select标签设置了clearable属性，但是不出现清除按钮 以及el-table合计功能滚动条层级问题
Gewenjuan_0309的博客
09-14 1669
最近做项目，公司要求在表格中加入“合计”行。查看element文档后使用自定义方法进行添加。添加后页面中，合计行在横向滚动条下方。这里要的滚动条是整个table的滚动条，所以将表头、表内容、表尾的滚动条设为visible。导致出现这个问题的原因是：此时的滚动条是表内容的滚动条。而合计行是属于表尾。解决办法：value正确使用接口返回的字段值。
vue3实现el-autocomplete输入框输入实现下拉列表
05-10
其中el-autocomplete是用来实现输入框的自动完成下拉列表的组件。 接下来，你需要在Vue.js的template（模板）中使用el-autocomplete组件，最基本的使用方法如下： ```html <el-autocomplete v-model="value" :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值