VUE：el-autocomplete clearable 提示框无法显示

已于 2023-06-17 15:34:37 修改
阅读量1k 收藏 1
点赞数
分类专栏： VUE 文章标签： vue.js javascript 前端
于 2023-06-17 15:27:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/slaron/article/details/131260727
版权
文章描述了一个在Vue.js应用中使用el-autocomplete组件时遇到的问题，当添加clearable属性后，清除输入后如果输入框仍处于聚焦状态，下拉列表不会重新显示。原因是activated被设为false且未在查询搜索成功后重置。解决方案包括直接设置activated为true或调用document.activeElement.blur()来使输入框失去焦点。
摘要由CSDN通过智能技术生成

记录下el-autocomplete clearable bug

el-autocomplete加了clearable属性，然后遇到了个bug，点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了

autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心思路就是想办法把this.activated的值设置为true。或者是清除完后让输入框失去焦点。

解决办法有两种：
1.给el-autocomplete添加一个ref,在清除事件后调用

this.$refs.xxx.activated = true

2.在清除事件里调用document.activeElement.blur()

document.activeElement.blur()
this.$forceUpdate()
Element-UI el-autocomplete带输入建议的输入框组件
一碗清深的博客
04-18 990
el-autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 el-autocomplete 组件中。
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 1117
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
jquery autocomplete实现框输入提示
04-11
jquery autocomplete实现输入框内容自动提示，ajax从后台数据库获取数据源。_renderItem定制结果格式
Vue使用Element的clearable属性清空输入框，以及clear事件重置表格
最新发布
weixin_52772457的博客
12-17 370
其中name为输入的查询条件,，重置时应该置为空，load()是自定义的分页查询接口方法，调用接口方法即可刷新。clearable显示叉号，@clear=“reset”为重置事件，reset为要写的方法。
el-autocomplete使用clearable造成远程搜索不显示问题解决
sinat_34896766的博客
06-19 347
但会出现点击清除图标，再输入数据，远程搜索数据下拉框不显示，可采用添加“trigger-on-focus” 和“v-get-selected-value”属性解决问题。使用基础用法，如上时，会存在下拉框不跟随输入框滚动的情况，添加“popper-append-to-body” 即可解决不跟随滚动的问题，
ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
热门推荐
weixin_42190844的博客
10-14 1万+
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了 查了一下，是因为有element-ui源码有bug，主要原因是 参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
el-autocomplete 自定义模板 使用 slot-scoped 下拉数据没有显示
qq_52038997的博客
06-05 1107
如果父组件在此插槽中传递了内容，将会被渲染。如果没有，则使用默认内容。按照官方文档写的自定义模板，下拉列表没有展示出来？
el-autocomplete解决不显示下拉框列表问题
Charonmomo的博客
12-23 2895
如图所示, 控制台中可以看到 results 中已经有了数据, 但是 cb(results) 却不能在网页中显示. 产生原因: element-ui对于返回数据的格式有要求，必须是一个数组对象，并且属性名为“value”，将results中的属性名换成value就可以了. 参考: 添加链接描述 ...
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
在本篇文章中，我们将探讨如何利用Vue.js框架中的el-autocomplete组件来实现一个类似于百度搜索框的功能。Vue.js是一个流行的前端JavaScript框架，它允许开发者构建交互式的用户界面。el-autocomplete是一个具有自动...
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
### Vue el-autocomplete远程搜索下拉框及自动填充功能详解 #### 1. Vue与Element UI简介 Vue.js是一款构建用户界面的渐进式JavaScript框架，以数据驱动和组件化的思想构建。Element UI是基于Vue 2.0的桌面端组件库...
vue element远程搜索下拉框出tooltip el-autocomplete下拉框出省略号时鼠标移上去出提示
yeyue1992的博客
03-11 2508
vue element远程搜索下拉框出tooltip el-autocomplete下拉框出省略号时鼠标移上去出提示 需求如下效果图如下对el-tooltip进行了二次封装组件使用 需求如下 1.element远程搜索框下 下拉框文字超出宽度后会出省略号 要求鼠标移上去能够出文字 效果图如下 对el-tooltip进行了二次封装 <template> <el-tooltip ref="tlp" :content="text" effect="dark"
vue+ elementUI使用el-autocomplete从远程实时查询
洋成林
04-09 4742
页面需求如下：第一步，在“预制模板”中输入模板名，需要从数据库模糊查询出数据集，第二步，选中某条数据后，将对应的其他数值填入“合并方式”等其他项目中。 <template> <el-dialog :title="'箱单发票创建设置'" append-to-body="true" :close-on-click-modal="false" :visible.sy...
element el-autocomplete数据不显示问题
jam476的专栏
01-29 3712
element el-autocomplete数据不显示问题
elementUi 中的 el-autocomplete 组件不显示下拉框中建议的值怎么解决
不知名人士的博客
03-31 3163
明明按照官方文档的例子稍微改造了一下，但是下拉框中的内容就是出不来，什么问题？？ 解决方法： 这个 value-key 属性的默认值是 value，你的键名不一定是叫value，改成你自己对应的就可以了。 ...
el-autocomplete获取到数据无法展示
babyrita的博客
05-26 1041
1、官网的方法，只匹配了开头，如果需要包含及返回，那么改下 -1。superviseObject，是你项目对应的字段。value-key：这个属性对应接口返回到字段。placeholder="请输入内容"
element 自动搜索 el-autocomplete，不显示结果
扮老虎的猪
09-03 3479
代码： <el-autocomplete style="width: 58%;" v-model="search_text" value-key="address" :fetch-suggestions="search" :trigger-on-focus="false" placeholder="请输入内容" size="small" ></el-autocomplete&
element-ui的el-autocomplete不显示下拉框中的数据
caoyuna1998的博客
05-18 1730
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
element el-autocomplete模糊搜索，点击clearable清空后，再输入下拉框不显示
honeymoon_的博客
12-01 3527
（一）问题描述 用element 的输入建议框，实现模糊搜索，在点击清空按钮clearable之后，如果输入框已经是聚焦状态，再次输入时建议框不显示。el-autocomplete组件在执行清除事件时，将activated置为了false。当querySearch执行成功，activated仍为false，所以下拉框不显示。 element官网链接：https://element.eleme.cn/#/zh-CN/component/input （二）解决 给el-autocomplete添加一个ref
[Vue]模态框不能弹出的问题（模态框被封装成子组件时）
m0_51066449的博客
03-08 957
一、问题发现 当把element-ui模态框封装成子组件，并将其放入父组件时，通过props和$emit父子组件传值控制模态框的visible使其弹出和消失。 但是点击按钮改变父组件的isShow（从false变为true）并将其传给子组件，在created中传过来的值赋值给模态框的visible时，模态框并没有弹出，虽然created中的代码会执行，但visible没有获取到变化成true的isShow，visible的值一直是false。 二、解决方法 created只执行一次，当created
el-select和el-autocomplete的异同
09-13
而el-autocomplete的选项可以根据用户输入的关键词动态过滤并显示，用户可以根据提示选择一个值或继续输入。 3. 数据结构：el-select的选项是一个简单的数组或对象数组，每个选项有一个value和一个label属性；而el-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值