element-ui的el-autocomplete不显示下拉框中的数据

最新推荐文章于 2025-03-27 17:42:34 发布
最新推荐文章于 2025-03-27 17:42:34 发布
阅读量1.7k 收藏
点赞数 2
分类专栏： element-ui 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/caoyuna1998/article/details/116977547
版权
本文介绍如何在缺少value字段的数据中正确设置value-key指向所需显示的字段，或手动添加value字段来指定显示内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如果你的数据里没有value字段，就要加value-key指向你数据里要显示的字段，或者手动加value字段指向你要显示的字段
在这里插入图片描述

Element-UI el-autocomplete带输入建议的输入框组件
一碗清深的博客
04-18 1137
el-autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 el-autocomplete 组件中。
Vue实战指南：el-autocomplete修改支持模糊搜索提示
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-13 2048
然而，默认情况下，这个组件可能并不支持模糊匹配，这意味着只有当用户输入的文本完全匹配选项的一部分时，才会显示匹配项。本文将详细介绍如何修改。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，提供了一系列预设的组件来加速 Web 应用的开发。对于更复杂的模糊搜索需求，可以考虑使用像 Fuse.js 这样的第三方库，它提供了一种简单的方式来执行模糊搜索。
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
小太阳的博客
10-21 1万+
ElementUi使用el-autocomplete实现搜索建议（无数据匹配+点击clearable清除，不触发下拉选项）
elementUi 中的 el-autocomplete 组件不显示下拉框中建议的值怎么解决
不知名人士的博客
03-31 3247
明明按照官方文档的例子稍微改造了一下，但是下拉框中的内容就是出不来，什么问题？？ 解决方法： 这个 value-key 属性的默认值是 value，你的键名不一定是叫value，改成你自己对应的就可以了。 ...
vue+element ui的远程搜索el-autocomplete组件详解与封装
最新发布
qq_67240326的博客
03-27 1299
vue+element ui的远程搜索el-autocomplete组件详解与封装
element-ui的el-autocomplete不显示下拉框中的值
热门推荐
要优秀！
04-03 1万+
如图：下拉框中的数组的内容全部获取到了，但是内容就是不显示。 解决：这是el-autocomplete的一个坑，el-autocomplete显示的时候必须有value字段，可以在返回的对象里面手动添加一个value属性， item.value = item.name; 备注：如果一开始显示的时候也没有列表项，也是手动添加value属性。 ...
el-autocomplete 自定义模板 使用 slot-scoped 下拉数据没有显示
qq_52038997的博客
06-05 1206
如果父组件在此插槽中传递了内容，将会被渲染。如果没有，则使用默认内容。按照官方文档写的自定义模板，下拉列表没有展示出来？
el-autocomplete不显示下拉框，选中后还弹出下拉框，手动去掉输入框焦点
weixin_45599105的博客
02-28 1215
el-autocomplete不显示下拉框，el-autocomplete选中后还弹出下拉框，el-autocomplete手动去掉输入框焦点
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
在Element UI中，el-autocomplete是一个提供自动完成输入提示的组件，可进行远程搜索。 #### 2. el-autocomplete组件的使用 el-autocomplete组件在Vue项目中通过简单的模板标签即可嵌入，能够与后端服务器进行交互...
element-ui el-autocomplete设置输入框和下拉框宽度，详细代码
06-07
要设置 `el-autocomplete` 组件的输入框和下拉框的宽度，可以通过以下代码实现： ```html <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入内容" :style="{width: ...
el-autocomplete解决不显示下拉框列表问题
Charonmomo的博客
12-23 2937
如图所示, 控制台中可以看到 results 中已经有了数据, 但是 cb(results) 却不能在网页中显示. 产生原因: element-ui对于返回数据的格式有要求，必须是一个数组对象，并且属性名为“value”，将results中的属性名换成value就可以了. 参考: 添加链接描述 ...
el-autocomplete没有匹配数据时通过css修改样式显示无匹配数据
a20001999的博客
02-01 1318
el-autocomplete没有匹配数据时通过css修改样式显示无匹配数据
element el-autocomplete数据不显示问题
jam476的专栏
01-29 3756
element el-autocomplete数据不显示问题
element 自动搜索 el-autocomplete，不显示结果
扮老虎的猪
09-03 3630
代码： <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 el-autocomplete模糊搜索，点击clearable清空后，再输入下拉框不显示
honeymoon_的博客
12-01 3590
（一）问题描述 用element 的输入建议框，实现模糊搜索，在点击清空按钮clearable之后，如果输入框已经是聚焦状态，再次输入时建议框不显示。el-autocomplete组件在执行清除事件时，将activated置为了false。当querySearch执行成功，activated仍为false，所以下拉框不显示。 element官网链接：https://element.eleme.cn/#/zh-CN/component/input （二）解决 给el-autocomplete添加一个ref
ElementUi el-autocomplete 踩坑 （使用clearable清除,点击输入框下拉条件不再显示）
weixin_42190844的博客
10-14 1万+
今天在写组件的时候，用到了el-autocomplete来做模糊搜索。因为要可以清除条件，所以加了clearable属性，然后遇到了个bug。点击清除图标后，如果你已经是聚焦状态了，你在点击输入框，下拉框不会再显示了 查了一下，是因为有element-ui源码有bug，主要原因是 参考该博客 autocomplete组件在执行清除事件时，将activated置为false。这时候下拉框不会显示了，而在querySearch执行成功后又没有将activated置为true。所以导致了该bug。解决的核心.
VUE：el-autocomplete clearable 提示框无法显示
小白的专栏
06-17 1086
autocomplete clearable后提示框无法显示
Vue 使用高德Api的Autocomplete 下拉菜单不出现的问题
m0_52775179的博客
03-02 1829
Autocomplete 插件需要有key 和 安全密钥 否则下拉菜单内容不会出现 具体用法
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值