el-form this.$refs[formName].resetFields()校验无效

最新推荐文章于 2023-04-28 11:47:54 发布
最新推荐文章于 2023-04-28 11:47:54 发布
阅读量548 收藏
点赞数
分类专栏： vue 文章标签： 前端 elementui
原文链接：https://wenku.baidu.com/view/fc67f809ac45b307e87101f69e3143323968f569.html
版权

问题：关闭对话框清除el-form表单rules校验，再次打开对话框校验依然存在，每次打开对话框都会重新校验rules规则
在这里插入图片描述

原因：form表单rules是动态绑定，每次打开对话框都会触发rules规则，若非动态绑定则不触发
在这里插入图片描述
解决方案：打开对话框关闭自动校验，把validate-on-rule-change设置为false
在这里插入图片描述在这里插入图片描述

正在前行的小码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
this.$refs[formName].resetFields(); }); } ``` 2. **条件判断**：在调用`resetFields()`前检查`$refs[formName]`是否已定义，以避免在未准备好的状态下执行操作。 ```javascript if (this.$refs[formName] !==...
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
10-14
this.$refs[formName].resetFields(); // 使用$refs和resetFields()方法清空表单验证 }, } ``` 除了点击取消按钮，我们还需要处理对话框右上角的关闭按钮。Element UI提供了`before-close`回调，可以在此处进行...
工作趣事之this.$refs[formName].resetFields()
qq_15674775的博客
01-06 8474
问题简述 有一天我正喝着热和冷混的刚刚好比例的水，漫不经心的点着我的页面，突然我被一个异常现象吸引，我点击了一个回复的弹窗，为什么弹出的弹窗中却已经有了填充内容，但我预想的不是这样，它该是空的才是，于是我尝试复现这种情况，发现只有当先点击某个更新回复弹窗并且操作后，随意什么操作，确认取消这些，再点击回复时，oh，no，情况出现了，最开始操作的更新回复的内容赫然显示在回复框本该空白的地方，这让我十分震惊，于是我查看了更新回复弹窗的close方法，方法中如是写着： data() { return{ for
this.$refs[formName].resetFields()；之后遇到的值替换bug
CHENC0518的博客
03-10 570
当我取消该次编辑事件时，调用，this.$refs[formName].resetFields()，会发现再次编辑其他行，取消编辑时，值被上一次的替换了。2.就是当我编辑一个表格时，会触发编辑弹框事件。4.原因是，值没有进行深拷贝，导致，响应式变化。1.最近开发之中，发现了一个非常奇妙的bug。5.我们只需要对传过来行的值进行深拷贝即可。
this.$refs[form].resetFields() 不生效
qq_25239049的博客
10-14 4379
所以，在 form mounted之前，如果给form表单赋值了，那么后面调用resetFields()都是无效的，因为form表单的初始值已经在 mounted 之前就被赋值了。而这个初始值是在form mounted生命周期被赋值上去的。1.el-form-item 没写prop。此方法用于将form表单的数据设置为初始值。
this.$refs.form.resetFields()你没有注意到的点
weixin_48837605的博客
08-17 1万+
element的组件中,给resetField方法的定义是对整个表单进行重置,将所有字符值重置为初始值并移除校验结果 但是实际的工作当中,发现 1.resetFields()只对具有校验的表单元素有关系 2.resetFields()重置并不绝对的意味着将表单设置为空,而是初识值 1号问题如下图所示: 解决方式:加入手动重置: this.$refs.form.resetFields() this.form.name = '' this.form.descri.
this.$refs[formName].resetFields() 失效
K_lele的博客
03-10 767
在ui-element 上的说明用this.$refs[formName].resetFields() 可以重置表单，试过了几次才发现要只用这种方式重置表单必须要在表单标签中加入prop 和required 属性，通过这种方式重置才有效果。加上required 和prop 后是可以重置了，但是，又会在标签前面显示 * 必填的标识，好吧，有点无语，我想重置的是搜索框，又不需要必填。没办法只能在百度看看，后面找到了两个方法，也可以实现重置功能。formSearch为表单名称。
vue 验证两次输入的密码是否一致的方法示例
10-14
this.$refs[formName].resetFields(); }, // 其他方法... } ``` 通过以上步骤，我们就创建了一个完整的Vue组件，用于验证用户输入的两次密码是否一致，并且保证密码长度在6到16个字符之间。当用户尝试提交表单时...
Vue element-ui父组件控制子组件的表单校验操作
10-15
在这个方法里，我们调用了`this.$refs['childRules'].validateForm()`来执行子组件的表单验证。如果验证成功（返回`true`），则进一步处理保存操作；否则，显示错误消息。 ```javascript methods: { saveForm() { ...
Vue ElementUI之Form表单验证遇到的问题
12-09
if (this.$refs[formName] instanceof Array && this.$refs[formName].length > 0) { this.$refs[formName].forEach((obj, index) => { obj.validate((valid) => { if (valid) { console.log('验证成功！'); } ...
Element 重置 resetFields()失效
轻风细雨_林木木
03-17 1072
https://my.oschina.net/yxmBetter/blog/1535157 解决方法： 1、表单加ref属性 <el-form ref="refname"></el-form> 2.form的每个item加prop属性 <el-form-item prop="name"> <el-input v-model="query.name...
ElementUI里 this.$refs[formName].resetFields()；不完全生效的原因
一枚正在学习的渣渣
04-28 351
最初只添加了plantName的校验规则，没有写橙色框里的代码，但plantInfo的数据就不会被重置，添上之后功能完全生效。restfilds的格式定义： this.$refs[formName].resetFields();我要实现的功能是点击取消或叉掉对话框后重置表单。
this.$refs[‘form‘].resetFields()方法重置表单无效的坑
热门推荐
学无止步的博客
09-28 1万+
this.$refs[‘form’].resetFields()方法重置表单无效的坑 1、用法不对 要想this.$refs[‘form’].resetFields()方法有效，必须配置el-form :model 属性和el-form-item中的prop属性，才可以。 注意：this.$refs[‘form’].resetFields()这个做法其实是重置表单到初始值，不是清空表单，当表单第一次在页面中渲染时所用的数据就是初始数据。 2、坑1 在还没有显示对话框之前就调用this.$refs[‘form
Vue表单重置，条件清空。this.$refs[name].resetFields()；
天青色等烟雨
09-06 2393
Vue表单重置，条件清空。this.$refs[name].resetFields(); 需要注意的是在form表单中，要添加【prop】 代码如下 <template> <div> <Form ref="formItem" :model="formItem" :label-width="80" inline> <FormItem label="名称" prop
this.$refs[formName].resetFields()不起作用、ElementUI表单重置不起作用
Liux- 的博客
03-22 1501
elementui新增和修改用同一个弹窗，resetFields不起作用
新建和编辑共用一个表单，编辑之后新建，form表单resetFields失效
zzzz121380的博客
07-28 653
或者注意如果使用resetFields方法清空，虽然可以清空，但是在先编辑再新建时，提交的字段会有很多，而且都是编辑的那一行的数据。即使加上this.$nextTick(()=>{}）也会有同样的问题，所有直接使用赋值的方法清空。...
form表单点击取消，rules验证规则不清空
future_1_的博客
09-14 731
From表单点击取消，rules验证规则不清空
关于Element-UI中el-form的resetFields()的小坑点
世界在我口袋的博客
02-18 1073
博主用vue和element-ui组件在写前端时,用到了表单部分校验的操作 但是在使用resetFields()时,会有一些不可避免的小坑点,特此记录学习笔记 1.完成数据的回显 如下图的红圈中,model肯定需要(用于回显数据),rules的绑定其实和需要校验的表单项有关(不校验的话其实用不到,这里就不再贴图),再者prop则是必须的,因为resetFields()这个方法就是根据该属性来的(官网的文档中也有说明) 实现流程大致就是,通过template标签来传入一行的数据到方法中,再用该行的数据赋值给
elment ui 之 表单 form 表单 的重置 this.$refs[formName].resetFields() 不生效
YZRHANYU的博客
12-09 880
elment ui 之 表单 form 表单 的重置 this.$refs[formName].resetFields() 不生效
methods: { // 弹出框关闭后触发 handleClose() { // 子组件调用父组件方法，并传递参数 this.$emit('changeShow', 'false') // 重置数据，同时也取消了表单的校验 refundFormData：el-form用ref绑定的值， this.$refs.refundFormData.resetFields() }, // 添加分类 handleCate() { this.showDialog = false var params = { name: this.form.name, categoryId: "", source: 6, parameter: { company: "a", }, } addCategory(params).then((res) => { this.$refs.refundFormData.resetFields() this.$router.go(0); }) } }, watch: { // 监听 addOrUpdateVisible 改变 addOrUpdateVisible(oldVal, newVal) { this.showDialog = this.addOrUpdateVisible }, } 请问这段代码如何用async和await改写
最新发布
07-14
this.$refs.refundFormData.resetFields(); }, async handleCate() { this.showDialog = false; var params = { name: this.form.name, categoryId: "", source: 6, parameter: { company: "a", }, }; ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值