el-input 第12页

怎么使＜el-input＞在同一行显示，在＜div＞或其它的父标签里不换行？

在正的HTML中，标签是不换行，例如：NewDocumentinput-1:input-2:input-3:效果如下图:这个不需要做什么设置就自然在同一行显示了，但是如果在Vue的ElementUI中，使用组件就不会这么简单了，默认是不会在同一显示的，我就遇到这样的一个问题，同样在一个标签里，每个都会换行。搜了一些资料但都不理想。有的是使用表格使每一个input都作为一个列放在一行的，有的是使用和

涵宝隆·2020-09-12 00:53

请输入效果-铺满100%

请输入效果-铺满100%图例格式分样式/deep/.el-input{position:absolute;width:10%;//top:-40px;left:-70px;border:0pxsolidtransparent

viceen·2020-09-11 18:27

解决element的el-input 输入框浏览器自动填充账号密码问题

浏览器会默认将已保存的账号密码填充到inputtype值为password的输入框内，如果在登录页面，这是期望的，但是如果在注册页面、新增账号等页面，这就是超出需求了，如下：可以通过以下方法解决，在type为passworld的input中加auto-complete="new-password"属性即可此外，我看到element官方文档的也有这个属性，但是我试了，并不能实现对应效果，原因暂未知，

Kaycee666·2020-09-11 11:13

VUE输入框显示时自动聚焦

:{focus:{inserted:function(el,{value}){if(value){el.focus()}}}}注意点：1、用v-if显示隐藏，不能用v-show，否则不生效2、如果用的el-input

weixin_30390075·2020-09-11 10:39

vue中让input自动聚焦的方法

自定义v-focus指令使用普通input输入框：directives:{focus:{inserted:function(el){el.focus();}}}使用element的el-input：directives

qq_34465778·2020-09-11 09:17

解决element-ui 输入框el-input 输入长度限制组件不生效

原因：可能你项目下载安装的element-ui版本和你看的官方文档版本不一样，element-ui,输入框el-input长度限制这个组件是最新版本2.8.2才有的所以：如果想要输入长度限制组件生效，请将

halo1416·2020-09-11 08:15

vue触发显示输入框后自动聚焦

原因是我的el-input在一个大的循环里面，即使只循环出一个同类型的该组件，也会是数组。相关阅读：https://seg

aithena·2020-09-11 08:32

vue中element-ui，Select 选择器更改大小

vue中element-ui，Select选择器更改大小在相应的页面引用选择器整好这些之后打开app.vue来更改这个框的大小.看自己命名字{.el-input{width:140px!

Stone_zzl·2020-09-10 16:20

vue自定义指令限制输入框输入值的步骤与完整代码

Vue自定义指令我们使用el-input作为表单的输入框1.先注册一个自定义

·2020-09-08 13:47

快速解决element的autofocus失效问题

原因：autofocus是vue中input的原生属性,element也支持这种方法,但是element中的el-input组件外面还有其他组件,导致autofocus失效,只能手动调用focus方法来聚集

·2020-09-08 11:29

【Vue进阶】——如何实现组件属性透传？

场景很多时候，我们基于一些UI框架进行二次封装，这里以ElementUI为例，封装一个Input组件类似如下：这个时候，我们需要保证外面能够直接设置el-input的属性,比如placeholder、clearable

Gopal·2020-08-26 23:16

vue elemen ui el-input 限制只能输入数字类型

月份数，薪资、电话号码等的input框需要限制只能输入数字类型内容1.实现：监听键盘输入，使用正则过滤掉其他字符οninput="value=value.replace(/^\.+|[^\d.]/g,'')2.遇到坑：然后遇到了一个问题，当输入其他字符再输入数字的时候，输入框中显示有值，但实际去打印v-model绑定的变量的时候就获取不到新输入值。即使用了一个函数限制输入框只能输入数字，输入其他将

ymumi·2020-08-24 20:35

element的el-form设计分析

表单组件的核心需求收集、校验、提交数据分层设计el-form，el-form-item，el-input等职责分析1.el-input：数据绑定到model的属性，触发校验通过v-model双向绑定数据

xupea·2020-08-24 17:01

element-ui踩坑

1、element复选框有时会出现选择没有打对号的问题，解决方法为label里的属性类型不对不能是number类型，要变成string类型2、element会自动生成一些标签，比如el-input会自动给外层加一个

weixin_30536513·2020-08-24 03:31

关于el-Input框和el-select宽度不统一的设置

elementUI:关于el-Input框和el-select宽度不统一的设置给el-select增加style=“width:100%”，即可以处理

连连的迷妹·2020-08-23 18:38

vue中如何在搜索框中实现关键字搜索

vue中用element组件库搭建搜索框进行搜索时，怎么进行关键字查询搜索呢input是搜索框，button是搜索按钮，如何引入并且实现ui界面就不详细说明，主要是如何实现搜索功能一、在el-input

园斯特洛夫斯基·2020-08-22 19:22

elementUI中的el-form怎么使用正则进行验证

：.vue的html不变，只是在.ts中的验证中添加自己定义的规则，比如.vue中@gridsum.com添加注意：1.el-form-item的prop="userId"跟el-input的v-mo

weixin_34055910·2020-08-22 19:27

vue element-ui el-form表单验证表单验证，数值输入验证踩坑

/element.faas.ele.me/#/zh-CN/component/form#biao-dan-yan-zheng2、所遇到的问题，当字段是数字类型的时候，输入input后，验证不通过原因是el-input

小涛_foxiaotao·2020-08-22 18:35

记录el-input type=number限制长度el-input使用

10)value=value.slice(0,10)"@keyup.enter.native="query()"onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))":max="99999999">oninput是个自定义事件在事件里面获取输入的数字长度，来进行判断如果大于规定长度就进行剪切。keyup.ente

王先生cc·2020-08-22 18:02

elementUI输入框组件样式自定义高度、圆角、边距调整图标跟随

下面以输入框el-input作个例子记录elementUI输入框为，但当它在网页中打开时，分为suffix和inner，一个在外部，一个在内部，如下当在vue文件中，给el-input添加class命名

LWHann·2020-08-22 17:43

如何使点击ElementUI collapse 上的组件时不响应折叠/展开

情景：点击折叠面板上的输入框时，会出现折叠面板也跟着响应的情况方法：可以在el-input外套一层div，监听这个div的点击事件，然后阻止冒泡事件。

张敬远·2020-08-22 15:17

element表单组件el-input填写不显示问题

input框填写不显示，日期组件选择不了，主要时因为我是动态加载的数据，存在异步问题，所以导致组件内容不能及时更新；下面是解决方法：forceUpdate(e){this.$forceUpdate();//@change="forceUpdate($event)"主要是解决clear图标响应问题},

哟西哟西_·2020-08-22 13:57

elementUi里面的el-input框有时候无法输入的问题

change(){this.$forceUpdate();}最近发现项目中需要输入内容的时候，input框有时候会无法输入进去发现elementUI中@input事件可以拿到当前输入的值，问题找到了，视图没有更新的问题解决方法this.$forceUpdate()

ougexingfuba·2020-08-22 13:30

要在textarea文本框中粘贴图片怎么办？

（文字+图片），点击编辑，文本框中显示描述信息，并且可以对描述信息做出修改拆解需求：文本框里要能显示预设的值（文字+图片）文本框里还要能支持粘贴文字与图片实际做法最开始我试图直接使用input元素或者el-input

谈小白·2020-08-22 11:27

扩展 element input 组件

结构图子组件（ExCom.vue）import{Input}from'element-ui'exportdefault{components:{"el-input":Input},props:["value

老实先生·2020-08-21 20:49

el-input不能输入问题

记录下：今天遇到el-input居然不能输入，搜了网上的说法，说事嵌套的太深了，需要使用@input="this.$forceUpdate();方式，但是我的没有怎么嵌套这么也会这样呢?

fivestar2009·2020-08-21 14:13

在使用element-ui时，碰到错误……type check failed for prop "value"。

Invalidprop:typecheckfailedforprop"value".ExpectedString,Number,gotArray.问题原因：在做表单校验时候，加入了一个隐藏的标签，并且el-input

绿皮德鲁伊·2020-08-18 16:10

Vue项目采用ElementUI，实现el-input禁止输入特殊字符

需知：在Vue中等价于text=e.target.value"/>在mian.js中添加【vue原型上添加方法，便于全局使用】：Vue.prototype.validForbid=function(value){value=value.replace(/[`~!@#$%^&*()_\-+=name=validForbid(e)">

法海你不懂爱_静·2020-08-18 01:19

el-input在vue中优雅实现禁止输入特殊字符

前提补充在vue中等价于text=e.target.value"/>需求前端提交form表单要求，不能输入@#¥%……&*…不是提示，而是禁止输入效果代码**在mian.js中添加【vue原型上添加方法，便于全局使用】Vue.prototype.validForbid=function(value,number=255){value=value.replace(/[`~!@#$%^&*()_\-+

chi1130·2020-08-17 21:08

element el-input @change 不触发改用@input监听值变化

虽然官网上说el-input监听值变化用change,但是发现并不好使最后改用input监听就可以了，也不知道是神马情况。。。

Luckyzhoufangbing·2020-08-17 20:14

element的autofocus失效问题解决

原因：autofocus是vue中input的原生属性,element也支持这种方法,但是element中的el-input组件外面还有其他组件,导致autofocus失效,只能手动调用focus方法来聚集

一月清辉·2020-08-17 19:48

el-input为数字时验证问题

el-input为数字时，初始有值，怎么还会验证不能为空？

weixin_33913377·2020-08-15 16:43

el-input获取焦点 input输入框为空时高亮 el-input值非法时

问题重述前端主要框架为Vue.js，在页面使用组件库element-ui的el-input、el-select、el-autocomplete等元件时，想要在表单验证为空时，使空值的元件获取焦点高亮。

weixin_33827965·2020-08-15 16:35

VUE el-input正则验证

①只能输入大于0的整数check(value){letreg=/^[1-9]\d*$/;var_this=this;if(value){if(newRegExp(reg).test(value)==false){setTimeout(()=>{_this.actionDataForm.studNum='';_this.errorTip=true;},500);}else{this.errorTip

weixin_30819163·2020-08-15 16:42

element-ui el-input / el-select输入框的非空校验

一、之前写的实现直接js判断就可以.prevent.stop是阻止继续冒泡不一样的见官方说明1https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C2自定义（我没看）https://juejin.im/post/5d28

StrongerIrene·2020-08-15 12:15

Vue全局指令/局部指令过滤el-input的值【特殊字符/手机号/网址等】

前端开发最常碰到的就是输入框，经常要做各种验证，本公司惯用的需求是直接屏蔽特定字符的输入，如禁止非数字输入，特殊符号输入，空格输入等，这些功能反复使用，做成指令的形式，直接调用，非常方便，上代码：第一种目录结构很简单：1、项目文件夹里新建directives文件夹，所有指令都放在这个文件夹里2、input-filter文件夹放具体指令，在其下建两个文件：index.js负责封装，职责分明input

小范馆·2020-08-13 23:40

betterscroll使用总结

content是wrapper唯一的子节点所有需要滚动的元素列表放入content中2、使用betterscroll以后，某些输入型元素事件失效以elememt-ui的组件el-autocomplete和el-input

little_kid_pea·2020-08-13 15:45

elementUI默认样式修改不成功的问题

问题：login.vue中引入login.css中.el-input__inner{background-color:rgba(255,255,255,.2);}设置el-input的样式没有效果。

weixin_34293246·2020-08-12 18:19

element-ui中的el-form表单验证，只有在提交按钮点击时才进行验证

其实很简单，直接在el-input上加一个属性就行，//就是本行所在的位置rules:{nodeName:[{required:true,message:'请输入名称'},将'blur'去掉，是鼠标失去焦点的时候会触发验证

sunmeng_sunmeng·2020-08-11 23:53

Element UI 的el-input同时绑定@keyup.enter.native和@blur冲突

问题：el-input框同时绑定键盘事件和blur事件，造成两次提交Before:keyup事件触发后，blur同样会被触发，造成两次提交handleInputConfirm方法。

Uncle_long·2020-08-10 14:44

vue加scoped后无法修改样式（无法修改element UI 样式）

提供的默认的样式不能满足项目的需要，就需要我们队标签的样式进行修改，但是发现修改的样式不起作用第一种方法原因：scoped解决方法：去掉scoped注意：此时该样式会污染全局样式，可以把它放在公共的css里面为了不让所有的el-input

qq_42221334·2020-08-09 11:36

使用扫描枪扫描条码时字符识别写入缓慢问题（针对element-ui的el-input）优化

文章目录问题描述问题解决方案的摸索问题解析代码分享问题描述前段时间仓库反映扫描识别慢，应要求去仓库出差排查问题，首先仓库的电脑配置较低，而且最近加了一个扫描二维码的功能（大概有接近200个字符写入），整体扫描时间（输入框写入字符+接口返回）返回结果一共用了2800ms左右。问题1：接口返回数据慢（后续已解决，接口那边大概从原来的500ms响应优化到100ms左右）问题2：扫描器扫描完后字符写入输入

涳涳嘚慌·2020-08-09 10:00

vue格式化input输入框的数字，4位一分隔

template（别忘记data里面绑定account）：由于使用el-input，所以这样写啦。

石文渊的博客·2020-08-08 20:15

el-input 密码类型 maxlength 不起作用。

ie9不支持flex布局ie9里，css行数过多会不加载，需要用CSSSplitWebpackPlugin分割newCSSSplitWebpackPlugin({size:4000,filename:utils.assetsPath('css/[name]-[part].[ext]'),}),9以下不支持websocket9刷新多次才显示界面。vue框架。9滚动条下拉框箭头展开箭头。排序箭头。9消

韩亚飞_yue31313_韩梦飞沙·2020-08-07 22:10

记一次el-input使用的坑

记一次el-input使用的坑el-input使用不同与原生input，所以在vue中改变绑定的数据时需注意要想在input时改变form.schedule的值来改变输入框显示的值，以下方法是做不到的/

YINAOR·2020-08-07 21:31

el-input限制输入

methods:{changeCode(){this.$nextTick(()=>{if(this.formSearch.licensedCode!==null){this.formSearch.licensedCode=this.formSearch.licensedCode.replace(/[^\d]/g,'')}})},}

高级前端工程师Vue方向·2020-08-07 21:43

el-input maxlength 不限制长度

背景：小鱼最近使用input输入框时想限制输入的长度，type="number"时，限制的长度无效，代码如下1查阅了相关资料后，换了种方式，问题解决使用οninput="if(value.length>11)value=value.slice(0,11)"可实现限制长度的功能111)value=value.slice(0,11)"placeholder="请输入账号"type="number">转

weixin_30781107·2020-08-07 20:47

vue中实时监听input中字符长度并限制，Element-ui el-input

input需要限制输入内容的字符长度（如果需要限制字符串的长度，只需要使用element-ui中的input的maxlength和minlength属性即可，原生的input同样的做法）如果是限制字符长度，el-input

weixin_30576827·2020-08-07 19:48

JS判断字符串长度，结合element el-input el-form 表单验证（英文占1个字符，中文汉字占2个字符）...

首先看看判断字符串长度的几种方法（英文占1个字符，中文汉字占2个字符）方法一：functionstrlen(str){varlen=0;for(vari=0;i=0x0001&&c=0&&charCode在线生成exportdefault{data(){//这里就是整个checkName啦，就是方法一的使用varcheckName=(rule,value,callback)=>{varlen=0;

weixin_30246221·2020-08-07 19:07

elementUI:关于elInput框和elSelect宽宽度不统一的设置技巧

因为el-select右边有一个icon图标(右边的padding为35px),而el-input只有15px,所以就存在了一个宽度的误差.解决方法:1.最简单的方法:是改el-input右边的padding

webfullstack·2020-08-07 19:56

推荐频道

el-input