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

最新推荐文章于 2024-05-28 11:44:38 发布
VIP文章 最新推荐文章于 2024-05-28 11:44:38 发布
阅读量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
尽管使用Vue.js编写了演示，但可以从任何JS框架提取Autocomplete对象。 要求 您将必须安装Vue＆Vuemit： npm install vue -- save npm install vuemit -- save 用于管理google组件与其父组件之间的事件。 注意...
elementui中input输入框clearable属性无效的解决方法
热门推荐
weixin_42717735的博客
10-23 2万+
elementui中input输入框clearable属性无效的解决方法 如果你按照官网文档加上clearable属性没有用的话，那么可能是版本不对或者没引入,可以使用这条命令 npm update ...
elementui el-autocomplete 当输入建议调用了接口后为空时，输入建议的下拉框一闪而过然后为空，去掉这个状态的解决方法
未末的博客
06-11 5423
如图所示，要实现在没有数据的时候就不要闪下面这个加载中， 解决方法步骤： 1.el-autocomplete自带的属性 debounce(输入建议的去抖延时),把它设为0 2.写自定义样式让所有下拉列表隐藏：.el-autocomplete-suggestion{display:none;} 3.在querySearch函数中让数据不为空的下拉列表显示（实现方法是通过自定义class名，然后让指定的class显示） 代码如下 <el-autocomplete pop.
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 474
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
element-ui的el-autocomplete不显示下拉框中的值
要优秀！
04-03 1万+
如图：下拉框中的数组的内容全部获取到了，但是内容就是不显示。 解决：这是el-autocomplete的一个坑，el-autocomplete显示的时候必须有value字段，可以在返回的对象里面手动添加一个value属性， item.value = item.name; 备注：如果一开始显示的时候也没有列表项，也是手动添加value属性。 ...
elementUi 中的 el-autocomplete 组件不显示下拉框中建议的值怎么解决
不知名人士的博客
03-31 2919
明明按照官方文档的例子稍微改造了一下，但是下拉框中的内容就是出不来，什么问题？？ 解决方法： 这个 value-key 属性的默认值是 value，你的键名不一定是叫value，改成你自己对应的就可以了。 ...
el-autocomplete解决不显示下拉框列表问题
Charonmomo的博客
12-23 2623
如图所示, 控制台中可以看到 results 中已经有了数据, 但是 cb(results) 却不能在网页中显示. 产生原因: element-ui对于返回数据的格式有要求，必须是一个数组对象，并且属性名为“value”，将results中的属性名换成value就可以了. 参考: 添加链接描述 ...
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
小太阳的博客
10-21 8731
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
element el-autocomplete模糊搜索，点击clearable清空后，再输入下拉框不显示
honeymoon_的博客
12-01 3283
（一）问题描述 用element 的输入建议框，实现模糊搜索，在点击清空按钮clearable之后，如果输入框已经是聚焦状态，再次输入时建议框不显示。el-autocomplete组件在执行清除事件时，将activated置为了false。当querySearch执行成功，activated仍为false，所以下拉框不显示。 element官网链接：https://element.eleme.cn/#/zh-CN/component/input （二）解决 给el-autocomplete添加一个ref
ElementUI 组件 el-autocomplete 实现文本框历史查询建议
niaonao
04-21 5865
需求：输入开票主体：该操作框为下拉输入框，用户可选择历史充值过的开票主体，也可以重新输入新的开票主体
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
12-13
在elementui Input输入框中可以找到远程搜索组件，获取服务端的数据 官网中的数据list都是写在loadAll()中的，而如果我们此时要用到mock的数据就要在此基础上对代码进行修改。 -mock数据的获取- 我们要获取远程mock...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 621
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 570
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
vue 使用 export default
global_coding的博客
05-24 346
vue 使用 export default
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
2301_79969279的博客
05-24 1098
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
深入解析：Element Plus 与 Vite、Nuxt、Laravel 的结合使用
一个普通人
05-23 1154
Element Plus 作为一个强大的 Vue.js 组件库，可以与 Vite、Nuxt 和 Laravel 等不同的工具和框架结合使用，为开发者提供灵活、高效的开发体验。根据项目需求选择合适的工具和框架，可以极大地提升开发效率和应用性能
js知识点汇总之let const 和 var的区别
fyw1789的博客
05-23 1525
声明的变量会先在作用域中被创建出来，但因此时还未进行词法绑定，所以是不能被访问的，如果访问就会抛出错误。因此，在这运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区。其实上面不存在变量提升的例子中，其实也是暂时性死区，因为它有暂时性死区的概念，所以它压根就不存在变量提升了。实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。中的作用域有：全局作用域、函数作用域，命令声明变量之前，该变量都是不可用的。，导致绑定这个块级作用域，
vue3实现el-autocomplete输入框输入实现下拉列表
05-10
在Vue.js 3中实现自动完成下拉列表的方法很简单，可以使用Vue.js提供的指令和组件的功能来实现。 首先，你需要引入ElementUI库，它是一个基于Vue.js的组件库，提供了非常好用的组件和指令。其中el-autocomplete是用来实现输入框的自动完成下拉列表的组件。 接下来，你需要在Vue.js的template（模板）中使用el-autocomplete组件，最基本的使用方法如下： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入" /> </template> ``` 在这里，v-model用来绑定输入框的值，placeholder用来设置输入框的提示语，:fetch-suggestions用来绑定一个函数，该函数会在输入框输入时被调用，它的返回值是一个数组，用来显示下拉列表中的选项。 接下来，你需要在Vue.js的script（脚本）中实现querySearch函数，该函数需要返回一个Promise对象，用来异步获取输入框输入后的联想词，例如： ```javascript <script> import { ref } from 'vue'; import { fetchSuggestions } from '@/api/suggestion.js'; export default { setup() { const value = ref(''); const querySearch = async (queryString) => { return await fetchSuggestions(queryString); }; return { value, querySearch, }; }, }; </script> ``` 在这里，我们用了Vue.js 3中新增的setup函数，在该函数中，我们使用了ref定义了value变量，并定义了querySearch函数，该函数使用async/await实现异步调用了一个api/suggestion.js的函数fetchSuggestions，该函数的接口可以根据自己的实际需求进行实现。 最后，你需要在Vue.js的style（样式）中引入ElementUI的样式，以确保el-autocomplete组件正常显示： ```css @import "element-plus/packages/theme-chalk/src/index.scss"; ``` 综上所述，使用Vue.js 3和ElementUI库实现输入框的自动完成下拉列表功能就这么简单，你只需要引入库、定义组件和指令、实现函数即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值