Element UI 之 el-input组件常见踩坑分享

最新推荐文章于 2025-04-30 17:23:33 发布
最新推荐文章于 2025-04-30 17:23:33 发布
阅读量3k 收藏
点赞数
分类专栏： 前端 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45325250/article/details/105768000
版权
本文探讨了在前端开发中，正确绑定input组件数据类型的重要性，避免类型错误如将数组错误绑定为string或number。同时，详细介绍了带输入建议的autocomplete组件的使用技巧，包括如何确保筛选数组中有value字段以正常显示建议选项。

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

一、 绑定的数据类型为string/number

如果错误绑定为数组之类的，会报以下类型错误

Invalid prop: type check failed for prop "value". Expected String, Number, got Array

二、 带输入建议的input输入框使用注意事项

  1. fetch-suggestions 是一个返回输入建议的方法属性

  2. 在筛选符合条件项的时候，如果被筛选的数组没有value参数项，要给其添加value参数，值便为你想要显示的选择项内容；如果没有value参数，不会显示。
    在这里插入图片描述

  3. 筛选过后满足条件的数组要通过回调函数callback(data) 返回到 autocomplete组件
    在这里插入图片描述

element 校验input输入手机号
weixin_42320560的博客
05-12 2921
element 校验input输入手机号
Element-UI el-input组件type=“number“的样式修改
Jana Jing的分享
07-14 6374
el-input组件
Element-UI组件使用 --踩坑篇
A__men的博客
02-22 1508
问题描述路径为空或#,未使用（覆盖默认的上传行为，可自定义上传），直接使用自定义调用接口，同时调两个接口，一个是action的默认行为，另一个是自定义接口，action调用404，自定义接口调用成功，最终需要去除404的接口调用问题原因action设置属性为#或者空时，触发上传动作时，会触发action的默认上传的事件，走一遍该标签的本地接口，从而导致接口404解决方法1：在事件中添加来阻止默认事件。解决方法2：使用覆盖默认的上传行为 （未实践此方法，有兴趣大家可以试一下）
基于Vue手写el-form el-form-item el-input 以及其搭配使用
最新发布
qq_38136932的博客
04-30 398
因为现在项目已经比较庞大了，估计得200页面左右，而且项目正在准备重构，刚开始不是我负责的，他们采用了element-ui 但是到后来element-ui的组件库已经不兼容ui设计图了，所以开始了第一次自己的组件库封装，如果有你觉得不好的地方，望大神指正。#####具体实现思想我就不一一复述了，不难，好好看一遍就懂了、当然，本人css很弱，如有更好的写法，请指正。由于时间原因，我并没有将组件的全部methods实现，不过一通百通，剩下的自己写吧。本页面代码Ctrl+C => Ctrl+V。
elementUI中input-number组件的坑
qq_40122602的博客
04-12 900
目前问题是输入非一百整数时会按四舍五入来纠正到最近的数值。于是尝试增加blur事件处理，但是还是会四舍五入。需求是一个输入框带加减按钮，步长为100，且输入非一百整数时，向下取整。排查下来发现要把step-strictly去掉，再增加blur。
完美解决elementui input输入框 Number 类型 的坑（上下三角箭头，科学计数法 e，保留小数，整数）
SanOrintea的博客
01-18 1万+
首先要明确： 1、数字类型是一个int，有限定的位数，太大就失精了，因此，太长的数字用tel类型，短数字用Number。 2、输入框是给用户用的，可以限制用户输入，但是不能自动改用户已经输入的东西（一开始用正则做了个匹配小数点后几位的自动删除，用户体验不好） 遇到的问题： 1、使用Number的时候，会有上下箭头（不好看），并且滚轮可以滑动（正常页面就是滚轮滑的，不能一键多用），禁用这两个 2、输入（或复制黏贴进去）非数字的时候，虽然没输入，但是输入框中的光标闪动到左上角了，禁用这个 <style l
【bug】el-input-number null值数据回显0，vxe-table中使用，踩坑记
花椒和蕊的博客
08-11 2527
正常列索引就是从0开始依次往后加一，但是vxe-table不是的，它遇到双表头会重新从0开始，就像下面这样。在vex-table可编辑列表中使用了el-input-number ，默认值为空，保存后发现输入框确实没值，但是一点击就会出现一个0。后端返我空值，null值都不行，因为null 和空值会被el-input-number 组件处理为0，需要定义为undefined。这里就要说到我踩的一个坑了，设置属性是放在cell-style方法中，根据条件找到对应列，增加属性。...
vue使用element-ui的el-input监听不了回车事件的解决方法
08-28
小编在使用element-ui时，el-input组件监听不了回车事件，怎么回事呢？下面小编给大家带来了vue使用element-ui的el-input监听不了回车事件的解决方法，一起看看吧
vue使用element-ui el-input+el-tree
weixin_46463643的博客
10-24 1579
简介：主要为树形下拉框选择数据对应input展示值 效果图 html <el-form :v-model="form"> <el-form-item> <el-input placeholder="请选择菜单分类" class="selectTree-input" auto-complete="off" v-model="form.inp
如何在Vue中使用Element UI的el-input组件实现搜索功能？
11-15
在Vue中使用Element UI的`el-input`组件实现搜索功能通常会涉及到以下几个步骤： 1. 首先，在你的Vue项目中安装Element UI库，如果还没有安装，可以在`main.js`或`App.vue`文件中添加依赖： ```bash npm install ...
Element UI的el-input-number组件有哪些内置方法？
12-05
Element UI的el-input-number组件提供了一些内置方法，方便我们在使用过程中进行操作和交互。以下是一些常用的内置方法： 1. **focus()**: 使输入框获得焦点。 2. **blur()**: 使输入框失去焦点。 3. **select()**:...
el-input-number控件不显示数值
weixin_41971121的博客
09-09 2533
el-input-number控件对属性绑定值的类型要求比较高，和数字相关的属性一律直接受number类型。由此引发的一个坑：明明绑定了data，但是没有显示在input框里，log打出的绑定值为undefined，看图 我的控件代码： <el-table-column label="返回数量" prop="returnItemNum" align="center"> <template #default="scope"> <el-i...
elementUI中遇到 [Vue warn]: Invalid prop: custom validator check failed for prop "status"
qq_36836277的博客
04-23 7105
一、使用 过程中遇到Invalid prop: custom validator check failed for prop “status” 原因排查1.status属性值中有空格 <el-progress :percentage="stepPercentage(item.step)" status=" success"></el-progress> 原因排查2:...
ElementUI出现的Invalid prop: custom validator check failed for prop "index"错误
凉茶冰
10-11 8741
问题描述 使用NavMenu组件时候，通过循环读取菜单信息来展示菜单列表。在进行了相关处理之后，菜单可以正常展示，但是控制台一直告警，报：Invalid prop: custom validator check failed for prop "index"的异常，如下所示： 出现这个问题之后，查看代码中的index处理，如下： 这样写，貌似是正确的，但一直告警。 解决方法 in...
element-ui 组件报错： Vue warn]: Invalid prop: type check failed for prop “min“. Expected Number with
weixin_47152812的博客
10-02 2062
element-ui 组件报错： Vue warn]:  Invalid prop: type check failed for prop "min".  Expected Number with value 0, got String with value "0".    出错位置： <el-form-item label="排序" ...
Vue + ElementUI: Invalid prop: type check failed for prop “router“. Expected Boolean, got String...
Yuki_Aruki的博客
05-07 673
遇到的问题: Invalid prop: type check failed for prop “router”. Expected Boolean, got String with value “true”. 检查了各种自己写的prop,都没有类型上的问题 到处搜索了一下发现,本项目的原因为写错了element-ui中el-menu自带router的格式,正确格式应当为以下两种: <el-menu :router=”true”> <el-menu router> ...
element ui 报错 [Vue warn]: Invalid prop: type check failed for prop “data“. Expected Array, got ；
ourring的博客
06-06 418
用element ui 写后台时控制台打印了一堆bug，原因是<el-table>中 ：data传的数据必须是个数组，写成对象之后就会疯狂报错。
element ui中input输入建议el-autocomplete注意事项
houzming的博客
07-19 1142
1. 在vue中的代码 div中： <el-autocomplete class="inline-input" v-model="locationName" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect" > <el-button slot.
element-ui报错 Expected String, Number, got Array.
热门推荐
qq_36437172的博客
01-09 2万+
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, got Array. 意思是说：希望 value 是字符串 、数字类型，而非数组。（这里都是粗心惹的祸，又被打脸一次，记录一下就好了~） element-ui 中的select 下拉框，尽可以制作单选下拉框，也可以实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值