el-form-item标签加prop后el-input无法输入文字处理

最新推荐文章于 2024-03-20 10:18:21 发布
最新推荐文章于 2024-03-20 10:18:21 发布
阅读量3k 收藏 1
点赞数 1
分类专栏： bug小记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KeepLearnZhangXiaoBo/article/details/118677957
版权

今天修改之前同事代码， 发现el-input输入框无法输入。

代码如下

 https://element.eleme.cn/2.0/#/zh-CN/component/form

prop表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的string传入 Form 组件的 model 中的字段

需要Form 组件的 model 中的字段。但是同事的form组件里面并没有该字段，所以导致input无法输入。对Form 组件进行补充后解决

Haocaibo
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
el-form循环el-form-item多个类型input并进行动态验证
weixin_50903388的博客
03-07 526
【代码】el-form循环el-form-item多个类型input并进行动态验证。
el-input无法输入情况汇总（记录一下）
weixin_43936040的博客
08-16 7919
有加form的表单校验，然后输入框无法数据的情况 整个页面是一个form表单嵌套着 红色部分是看情况增加，如果不点新增那它也可以没有，点了新增里面的input就成了必填 这里data 声明里是这样的，addAccountPOS 数组就是红色方框部分就是绑定的数组做了循环 subForm: { updateSupplierName: '', billsType: 'UPDATE', accountVOs
el-form动态增减数据的问题，编辑时候input输入不了
m0_52611940的博客
10-23 379
el-form动态增减数据的问题，编辑时候input输入不了
解决el-input无法输入的问题和表单验证失败问题
最新发布
qq_52126119的博客
03-20 848
1、在el-input组件中使用v-model进行双向数据绑定 2、有时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。 3、使用$forceUpdate方法强制刷新 ，表单验证失效（表单已经输入值，表单验证显示为空）， 由于此次表单是动态添加的，rules也需要动态添加
el-input无法输入,输入不对
我是星星的博客
06-05 2322
在代码块中加入 @input="change($event)" 进行强制刷新，这样子会解决我们el-input无法输入问题，1、input输入框没有进行双向数据绑定，没有v-model。el-input输入框无法输入的问题？2、组件嵌套太深，无法读取。
vue中el-form下的el-input无法输入的问题，el-selete改变值后选中的内容不变
wuye___的博客
08-16 942
vue中el-form下的el-input无法输入的问题，el-selete改变值后选中的内容不变
开发（bug）总结5-el-input无法输入的问题和表单验证失败问题(亲测有效)
Mr_LiuP的博客
10-20 2360
原因（可能）：网上查了很多都没有给出明确的解释，有的说可能是因为组件嵌套太深导致的，也有可能是组件本身有潜在bug。真实原因也没搞懂，有知道的同学可以告诉下。// this.$forceupdate() // 强制数据刷新之后, 验证失效, 改用 $set ,亲测有效。点击添加，表单内可输入用户名 和 用户姓名，但有时会偶发出现无法这两个input框里面无法输入内容。大部分无法输入的问题：基本都是没有进行v-model双向数据绑定，这个很好解决。
element-ui form表单校验重置表单后无法输入
kis_wuyan的博客
08-17 2535
element-ui form表单校验重置表单踩得一个小坑 着急的话直接看文章底总结 前言，给form表单加了rules校验后，提交表单前进行字段检查 this.$refs[formName].validate( valid => { // validate接受两个参数，具体参考element官网api文档，第一个是boolean值 if(valid) { // 为true时，说明表单校验通过，符合rules }else { // 不满足时的逻辑处理 } } 然后提交前检查完事 打开
vue input无法输入值
我爱美女S的博客
10-18 1118
vue input无法输入值
详解element-ui中form验证杂记
01-19
当我们添加required验证后，输入一些数据后再删除完时，会出现xxx is required，如下图所示 你可能很纳闷，已经为form表单传入了rules了啊，在不全部删除时，验证规则都没问题。这个问题是因为在html中使用了...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
12-28
2.表单项el-form-item没有添加prop属性，prop属性需要与input框绑定的属性一致 <el ref=form model=sizeForm label-width=80px size=mini> <el label=活动名称 prop=name> <el v-model=sizeForm.name></e
vue中使用element-ui进行表单验证的实例代码
12-29
•html中在el-form-item 中增加属性 prop=”名称” •js中直接在data中定义rules:{} •html部分 <el ref=form rules=rules model=form label-width=300px> <el label=发货地址： prop=fAdderss> <el-input ...
使用element-ui +Vue 解决 table 里包含表单验证的问题
12-28
这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。 :prop=”‘tableData.’ + scope.$index + ‘.字段名'” 方法一： <div class=app-container> <el model=fromData ref=from> <el data=from...
vue element table中自定义一些input的验证操作
01-19
官网原话 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将...其实问题关键就在于如何给el-form-item动态绑定prop :prop=”‘tableData.’ + scope.$index + ‘.字段名'” <div cl
报错java.lang.ClassCastException: java.lang.Long cannot be cast to java.lang.String解决踩坑
热门推荐
xiaobozhang1993的博客
06-09 1万+
service传参调用mapper，报错java.lang.ClassCastException: java.lang.Long cannot be cast to java.lang.String
web打印lodop预览报错Error:papage size(W:0 H:0) invalid解决
xiaobozhang1993的博客
08-10 1万+
客户使用lodop打印时，打印预览出现Error:papage size(W:0 H:0) invalid! 确保客户安装包与我们的一致后，各种测试均不出现，只好进行远程控制，使用DoroPDF Writer(虚拟打印机)安装排查，发现虚拟打印机是可以使用的。通过选择打印机复现了问题，原来客户选择错误导致。 以下为官方人员指导排查建议，大家遇到问题，可以寻求lodop技术人员的帮助，很有用！ ...
git提交 fatal bad revision Head 和储藏更改You do not have the initial commit yet解决
xiaobozhang1993的博客
11-26 1万+
最近几天代码没提交，今天发现提交报错fatal bad revision Head，并且无法拉取和切换分支 git储藏更改提示：You do not have the initial commit yet 使用git reflog查看日志，提示fatal: your current branch appears to be broken 解决方法： 在.git\logs\refs\heads\xxx （当前分支） 中的最后一个哈希值 复制到 .git\refs\heads\xxx（当前分支） 中
java生成自增编号数字
xiaobozhang1993的博客
02-25 1万+
public String getOldNum(){ String oldNum ="00000001"; String maxOldNum = jmDocMapper.findMaxOldNum(); if(null !=maxOldNum){ int i = Integer.parseInt(maxOldNum)+1; //%nd 输出的整型宽度至少为n位，右对齐，%8d即宽度至少为8位，位数大于8则输出实.
EasyExcel报错Caused by: java.lang.NoClassDefFoundError: org/apache/poi/poifs/filesystem/FileMagic
xiaobozhang1993的博客
06-23 9692
除了引入easyexcel，还要引入poi，并且poi版本要一致。 可参考https://github.com/alibaba/easyexcel/blob/master/pom.xml
el-form-item 动态绑定rules校验规则
08-19
您可以使用动态绑定的方式来实现el-form-item的校验规则。首先，您需要在data中定义一个rules数组，用于存储不同字段的校验规则。然后，在el-form-item中使用:rules属性来动态绑定对应字段的校验规则。 下面是一个示例： ```html <template> <el-form :model="form" ref="form"> <el-form-item label="用户名" prop="username" :rules="rules.username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :rules="rules.password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } }; }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过，提交表单 // TODO: 提交逻辑 } else { // 表单校验不通过，显示错误提示 } }); } } }; </script> ``` 在上述示例中，我们使用了一个form对象来绑定输入框的值，并在data中定义了一个rules对象来存储校验规则。在el-form-item中，使用:rules属性来动态绑定rules对象中对应字段的校验规则。最后，在submitForm方法中，通过this.$refs.form.validate()方法来触发表单校验。 希望能对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值