Vue3+element-plus,el-form不能连续输入，正确输入后表单检验仍然爆红，且修改表单时各项无数据的问题

最新推荐文章于 2024-04-29 21:30:28 发布

钢铁泰罗

最新推荐文章于 2024-04-29 21:30:28 发布

阅读量334

点赞数 2

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/weixin_45926180/article/details/136715437

版权

Vue3+element-plus,el-form不能连续输入，正确输入后表单检验仍然爆红，且修改表单时各项无数据，表单显示为空。

问题很好解决但是却很难找出来。

vue2+element项目中，el-form的ref和:model数据的变量可以是同名的，即使这里代表的不是同一个变量。即可以写成：

<el-form ref="form" :model="form" :rules="rules" label-width="80px">

但是在Vue3+element-plus中这么写就会有以上错误，所以把ref和:model区分开就可以解决问题

如下图：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

钢铁泰罗

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue3+element-plus,el-form不能连续输入，正确输入后表单检验仍然爆红，且修改表单时各项无数据的问题

el-form不能连续输入，正确输入后表单检验仍然爆红
复制链接

扫一扫

使用vue3+element-ui plus 快速构建后台管理模板

10-17

Vue3和Element UI Plus是现代前端开发中的两个热门工具，它们结合在一起可以高效地搭建功能丰富的后台管理系统。Vue3作为Vue.js的最新版本，引入了许多性能优化和开发体验改进的特性，而Element UI Plus则是基于...

element plus 必填项正确填写后仍有提示信息、标红

m0_65051174的博客

01-18

938

el-form ref="queryFormRef" :model="queryParams.attribute" :inline="true"> 此处用的是 el-form 的 model 属性，而不是v-model。el-input 中必须绑定 v-model 属性。以上三点确认后基本就不会有问题了。一般检查以下两点即可改正。

1 条评论您还未登录，请先登录后发表或查看评论

vue element form rules表单规则验证，输入框有值，但验证始终不消失问题的个人解决办法

qq_38876396的博客

06-23

5411

本文章对element的表单规则验证中输入框有值，但验证始终不消失的问题，在个人项目的特殊情况下提出解决办法

elment-ui表单初始化校验报红提示

weixin_45536426的博客

11-22

977

欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式进行展示；增加了图片

在vue中使用element-plus中的input,一次只能输入一字符

h1753806379的博客

04-29

440

因为大意，导致element-plus中的input无法输入

Element UI进行表单校验的时候，输入正确内容后，还有提示问题

weixin_52727969的博客

03-31

6015

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。1.看看你的el-form 是否绑定了值model并且model后面的名称是否和你后面表单输入时使用的名称相同；2.el-form 是否绑定了验证规则：rules(起个名字我们的提示信息就是在这里面写的)字眼表明其主要的使用场景是在组件内部，后面的那一大段是说明缘由的。的值是否和rules的值对应。

vue3 element plus el-input 无法输入问题

supming1的专栏

11-11

9032

最近用vue3 elementplus进行开发，发现el-input无法输入，代码如下： <template> <el-card> <template #header> <div class="card-header"> <el-form ref="searchForm" :model="searchForm" label-width="80px"> <el-form-it...

Vue3+element-plus+axios 综合小案例

09-26

例如，使用<el-table>来展示数据，<el-dialog>来实现弹出对话框，<el-form>和<el-input>用于表单输入等。 axios是一个广泛使用的JavaScript库，用于在浏览器和node.js中发送HTTP请求。在Vue3应用中，axios常用来与...

vue3Util:基于vue3 element-plus form表单二次封装

05-05

Vue3Util是一个基于Vue3和Element Plus库对表单进行二次封装的工具，旨在简化开发者在Vue3项目中处理表单的过程，提供更加便捷、高效的形式数据管理与验证功能。Element Plus是流行的Vue2和Vue3兼容的UI组件库，其在...

vue+element创建动态的form表单及动态生成表格的行和列

10-16

在本文中，作者详细讲解了如何使用Vue.js框架配合Element UI库来创建动态表单以及动态生成表格的行和列。本文基于实例代码，从实际操作的角度出发，介绍了技术实现的过程和方法，具有很高的参考价值。首先，我们...

Vue ~ element-ui 动态表单验证，支持添加和删除操作

07-27

总之，“Vue ~ element-ui 动态表单验证”项目展示了如何利用Vue.js和Element-UI的强大功能，结合动态表单和验证规则，实现一个灵活且功能丰富的后台表单系统。通过掌握这些技术，开发者可以更高效地处理各种表单...

element-ui input 输入框赋值后，无法再输入的问题解决

weixin_55510188的博客

11-01

2565

初始值form的属性没有定义，后续直接给form添加属性并赋值，vue没有监听到form值变化，输入选项就没有重新渲染，所以出现无法输入（实际已赋值）。

Element Plus Form 动态表单自定义校验规则使用教程

悟世君子的博客

01-17

5489

Element Plus Form 动态表单自定义效验规则，官网示例代码中没有，官网示例中的动态表单是固定的规则，本文讲解动态表单自定义规则的使用动态表单自定义效验规则，是将官网 rules 对象改成数组后，添加自定义规则即可，这种方式同样适用于 View UI Plus

解决element的表单校验输入框有值但校验未通过的问题

热门推荐

JCat的博客

07-26

4万+

实际项目中，为了精简代码，会涉及到在同一个表单中同时完成查看编辑新增等功能，此篇解决： 1. 编辑的时候，明明给页面回显赋值了，但是校验非空却没有通过的问题。 2. 表单刚一进页面就校验非空，显示红色提示的问题。 3.常规表单关于校验的规则。

【踩坑笔记】vue3 element-plus el-input 无法输入问题

soladuor

10-08

7606

原因是 el-form 的 v-model="loginForm" ref="loginForm" 在vue3中值不能相同。把ref去掉或者改名即可。

解决elementUI input组件只能输入一个文字，然后自动失去焦点的问题

.伊泽瑞尔

10-18

1788

解决elementUI input组件在使用过程中一次只能输入一次文字，然后就会自动失去焦点的问题

vue3 vite typescript volar element-plus element标签报红问题的解决

dugucike的专栏

04-27

2588

vue3 vite typescript volar element-plus element标签报红问题的解决，模块 ""element-plus"" 没有导出的成员 "FormInstance"

vue el-element中el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值

qq_45067263的博客

02-17

5483

项目场景： <el-table-column label="税率" prop="TaxRate" width="180" align="center" show-overflow-tooltip> <template slot-scope="{row, $index}"> <el-form-item :prop="'InquiryItemList.' + $index + '.TaxRate'" label-width

ElementUI form校验填入了数据仍红色提示输入

TarkuNi的博客

05-25

1641

如下图，经纬度明明有值了，点击确定提交仍然会提示经纬度缺失，我甚至在点击确定按钮的方法里打印form绑定数据（:model="editData"），打印的数据中经纬度绑定的数据也是有的，比较特别的是我的经纬度是我点击地图自动带出来的，不是手输的，查了好久都解决不了，直到一个大神提示说，是不是新增时，父组件传过来的参数即form绑定的editData没有经纬度绑定的lat和lng？

vue3+element-plus 表单校验