使用element-ui中的el-autocomplete报错

最新推荐文章于 2023-12-22 16:40:48 发布
最新推荐文章于 2023-12-22 16:40:48 发布
阅读量3.2k 收藏
点赞数 1
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyh135923/article/details/106136755
版权

使用element-ui中的el-autocomplete报错，报错如下：
在handleChange这个方法中报错，传入的不是event事件，而是输入的字符串。
在这里插图片描述
最近使用element-ui中的el-autocomplete发现框架原生代码里面报错，
一开始我还不相信原生代码会有这么低级的错误，所有我花了两个小时看我自己的问题，该试了都试了，
直到在在线运行事例代码后发现也报错才确认。

有个问题，如何给element官方提问题呢？

今天520，有没有想要脱单的小伙伴，加入我们的脱单星球，认识更多优秀的小哥哥小姐姐

特此声明，星球是免费的，但是创建星球的时候说是必须输入金额，所以只能先私聊，我再加你免费加入！

在这里插入图片描述

花霁
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Element-UI el-autocomplete带输入建议的输入框组件
一碗清深的博客
04-18 549
el-autocomplete 是一个可带输入建议的输入框组件，fetch-suggestions 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 el-autocomplete 组件中。
前端踩坑（七）(vue) el-autocomplete 1.下拉延时出现，影响其他弹出窗口；2.收起下拉
TUTsmile的博客
12-17 1776
解决办法 1.下拉延时出现，影响其他弹出窗口（穿透了蒙版） 根据官方文档可得知防抖延时，有个 debounce 将其设置为 0 即可 <el-autocomplete :debounce="0"> </el-autocomplete> 2.下拉在最上层 设置ref <el-autocomplete v-model="localSelec...
20181209——复习ElementUI（二）Form操作
寄蜉蝣于天地，渺沧海之一粟。
12-09 494
Radio 单选框 el-radio 标签 里面v-model绑定这个data中的数据项 label表示是第几个，在data中数据中的返回值进行选定 disabled属性，使单选框禁用 只要给radio标签设置了disabled属性，无法更改 单选框组，节省了代码，无需给每一个单选框都绑定v-model el-radio-group 单选框组还有size属性，来决定单选框的大小 设置border...
autocomplete 修改 value 是数字时报错问题
05-29
在后台用json序列化后，value 对应的值是数字时就不会加引号，在输入框输入要查询的字符时出现无法转换问题。 现在只是标准的json格式数据都正常使用。
使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息
weixin_45618937的博客
11-28 1302
使用el-autocomplete做校验时，点击选择完选项还是会提示报错信息
el-autocomplete报错toLowerCase方法为null
海贼王某人的博客
06-29 1110
头疼了一下午，终于解决，话不多或少，看图吧： 上面是报错信息，下面是页面显示 解决办法，我也不知道为什么，看下图： querySearch(queryString, cb) { var restaurants = this.restaurants; for(let i = 0; i < restaurants.length; i++) { restaurants[i].value = restaurants[i].name+''; }
jquery autocomplete jqueryui报错
weixin_34352005的博客
03-28 176
使用jquery autocomplete 但是却报错jquery ui 0 TypeError: t[0] is undefined 本地部署是没有问题的，但是放到正式上面就会出错。 同时mvc的model里面的客户端验证信息，compare的提醒信息怎么搞都是一半中文一半英文。 找了半天，还是后台出错搞的。 像这种稳定的jquery，还是先从后台找原因比较快，firebu...
详解element-ui中el-select的默认选择项问题
10-16
在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。 首先，`el-select`是Element-UI提供的一个...
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
首先，问题一涉及到了Element-UI的`<el-autocomplete>`组件，这是一个带有输入建议的输入框，用于实现模糊查询。当从后端获取到数据并传入`callback`函数时，预期应该显示输入建议列表，但实际上却只显示了一个空白...
element-ui-api-2.x版本.zip
10-10
使用 Element UI 的主题工具，开发者可以快速定制符合企业风格的主题色和组件样式。 6. **性能优化**： Element UI 运用了虚拟DOM和懒加载策略，提高了组件在大量数据场景下的渲染性能。 7. **兼容性**： ...
【JavaScript源代码】Element-ui 自带的两种远程搜索(模糊查询)用法讲解.docx
12-28
饿了么自带两种方式可以做，一种是使用el-input中的el-autocomplete，另一种是使用el-select和el-option。这两种都可以选择，但是具体实现的思路方式要和后端商量。模糊查询是谁来做？　那么前端只需要把用户在...
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
12-29
<el popper-class=my-autocomplete custom-item=my-remote v-model=state fetch-suggestions=querySearch placeholder=默认空 icon=close on-icon-click=handleIconClick> </el> js: [removed] import Vue from ...
autocomplete组件遇到的问题
weixin_30522095的博客
11-20 613
其实这个组件到目前为止算是失败了，没有继续往下写，且写的过程中bug很多。 前些日子写autocomplete组件时遇到的一些细节问题。 1.缓存：对输入过的字符进行缓存，可以避免过多请求。 2.对于文件框 按enter键会导致表单提交 ，应该给出接口是否阻止表单提交。 其他的似乎忘记了。 转载于:https://www.cnblogs.com/zuojing1013/p/34...
带输入建议的输入框el-autocomplete不能通过required怎样解决？
婷er的博客
04-22 2199
在做验证的时候，其它组件的验证都好好的，就el-autocomplete一直验证不了，选了值还是有提示，它检测不到，找了很久，终于把它解决了，记录一下。 一开始是这样的 选了还是没有效果。 解决方法： 此处的customerList是下拉选项查出来的list，把它赋值给另外一个list里面，才有用，不然没效果（原因我也不知道）。 function isInArray(arr, value...
Vue子组件获取父组件传递的动态数据为空，el-autocomplete组件传递自定义数据问题
yw00yw的博客
02-14 2381
Vue子组件获取父组件传递的动态数据为空 当父组件 axjos 获取数据，子组件使用 props 接收数据时，执行 mounted 的时候 axios 还没有返回数据，而且 mounted 只执行一次，这时 props 中接收的数据为空 解决办法： 在对应组件中判断数据的长度 &lt;login-form :fertilizerStationList="fertilizer...
vue-tabel 中使用 el-autocomplete 出现的问题
m0_61382303的博客
09-12 985
我自己用的话缺一不可说一下我自己项目中遇到的问题吧，我写的是表格中套表格，会出现就是当下拉选的时候用@selete是可以用的，但是用@blur也可以触发 ， 但是仅限于 失去焦点点在表格内才会触发，在其他地方是不会触发的我查了一下原因是冲突了在二级表格的时候我就只用了@change 方法但是这还里面还有一个bug 就是输入的时候后面会有一个小删除按钮，当我点击删除的时候，@change事件传的值不是为空，而是修改之前的值 索性我就不用× 直接把他disaplay ：none 了。
element-plus中el-autocomplete组件选择数据后提示框反复弹出解决方案
HOMEXS的博客
03-09 1274
element-plus el-autocomplete
element源码解析(2) -- autocomplete
kunyao8536的博客
01-22 4076
autocomplete源码解析template一个class:el-inputel-autocomplete-suggestionsvisible-arrow:没见到这个属性发挥作用四个属性:popperClass:scriptpropsdatacomputedwatchmountedmethods autocomplete中包含三个组件,input和suggestion/el-scrollbar template 一个class: el-autocomplete:相对定位和行内块; 一个自定义指令:
elementUI中el-autocomplete和el-select用法和各种坑
以马内利的博客
12-22 3683
又或者是如果第一次搜索”北京“，出来北京的列表，选择”北京美丽安全有限公司“后，再次把”美丽安全有限公司“删掉，在弹出的列表中没选择，直接点击旁边，隐藏了列表，再点击提交按钮。但又出现新的问题，打开dialog中首次输入公司，查询出来的列表。但是其他id值没被清空，还是上一次选择的，在提交的时候随便输入一个名字，没选择，对应的id是有值的，还能提交，这就是另外一个bug了。需求：要在文本框中通过输入关键字模糊搜索出一个列表，在列表中选中一个值后，这个选中的对象的其他属性要赋值到提交对象上，用于提交。
vue3el-form中使用el-autocomplete
最新发布
04-09
在Vue 3中使用Element UI的el-autocomplete组件可以通过以下步骤实现： 1. 首先，确保你已经安装了Element UI和Vue 3的相关依赖。 2. 在你的Vue组件中，引入el-autocomplete组件和相关的样式： ```javascript import { ElAutocomplete } from 'element-plus'; import 'element-plus/lib/theme-chalk/el-autocomplete.css'; ``` 3. 在template中使用el-autocomplete组件，并绑定相关的属性和事件： ```html <template> <el-autocomplete v-model="value" :fetch-suggestions="querySearch" placeholder="请输入关键词" @select="handleSelect" ></el-autocomplete> </template> ``` 4. 在data中定义value属性，并实现querySearch方法和handleSelect方法： ```javascript export default { data() { return { value: '', }; }, methods: { querySearch(queryString, cb) { // 根据输入的queryString进行搜索，获取匹配的建议列表 // 将建议列表通过cb回调函数返回 }, handleSelect(item) { // 处理选中某个建议项的逻辑 }, }, }; ``` 5. 在querySearch方法中，根据输入的queryString进行搜索，并将匹配的建议列表通过cb回调函数返回。你可以使用异步请求或者本地数据来实现搜索逻辑。 6. 在handleSelect方法中，处理选中某个建议项的逻辑。你可以根据选中的项进行相应的操作，比如更新value的值或者执行其他操作。 这样，你就可以在Vue 3中使用el-autocomplete组件了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值