本篇内容介绍了“el-formresetFields无效和validate无效如何解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！在使用 el-form 过程中，尤其是表单验证这一块，官方提供的 reserFields 方法以及验证方面存在一些坑，在此记录一下，给大家提供可能的解决办法。先来看看官方提供的案例，对应的官网 表单验证对应的代码对应的字段含义，在官网上都有详细的解释，那么如果类似的表单重置 resetFields 时候无法成功，那么可能的原因有哪些呢？（以下皆由个人实践得出，具体原因有些不太懂，欢迎解释补充）resetFields 失败可能原因1: el-form 中使用 v-model="ruleForm"代替了:model="ruleForm"，正确的应为后者。2: el-form-item 中的 prop 属性设置错误，官网给出了解释。即 prop=a, v-model=Form.a，Js中表单数据字段Form:{ a:'', b: [] }，需要一一对应，不能出现差错。3: el-form 中 ref ="formName"一致。项目开发过程中，通常 el-form 都是嵌套在el-dialog中。在表格页面中，点击添加或者修改按钮，弹出同一个表单，因为两个操作都是类似的组件，不同的组件可以用 v-if 屏蔽掉，这也是大多数开发中公用组件的一个体现。举个个例：通过添加按钮和编辑按钮都能够打开这个dialog。EditRole.vue先添加后编辑一般打开这个页面后，我们测试数据的时候，都是先点击添加按钮，关闭dialog后，再点击编辑按钮。此时你使用this.$refs[formName].resetFields(); 是能够将表单重置为空的，因为初始化的时候，本来form数据就是空的。先编辑后添加但是若你先点击编辑按钮，通过父组件传递了 本行数据 到 el-dialog 的 el-form 时，退出后再点击添加按钮，此时会发现数据被污染，表单竟然不是空的，而是出现了刚才编辑那行的数据。图示：关闭弹窗时，我们设置了clear函数，clear函数为关闭dialog执行的函数。其中调用了resetForm函数，即利用this.$refs[formName].resetFields()来希望重置数据。但是再点击添加按钮时，数据并没有清除。这个现象的原因是因为dialog是懒加载的，通过表格中的编辑按钮打开dialog时，传过来了父组件行数据。即初始化时数据并不是空的，而resetFields() 函数重置时，初始化的值是啥就是啥。了解本质后，那么解决这个问题就简单了，我们关闭弹出时，不使用resetFields()函数不就行了。而是这样：改动后结果：相当于编辑退出后，将form表单初始化为空，这样就无法出现污染了。但是这样也有个问题，重置数据后，无法移除校验效果。好在官方给了我们方法，只需要添加一行。当使用表单验证的时候，如果正常的验证都无误，提交时，我们通过以下代码来判断是否验证成功。但是使用自定义验证规则是，注意规则中回调函数callback()一定要写，官方文档也写的十分清楚。否则 if(valid) 条件无法判断，而且它是没有报错的。如自定义邮箱校验的时候：c免费云主机域名allback() 回调函数必须要被调用。这是目前碰到的表单问题，大家有什么好的解决方案或者新问题，欢迎在评论区留言，帮助大家解决问题！2021/4/21今天给表的表单添加验证规则的时候，el-form-item都配置好了prop属性，但是无效，F12后给出一个警告然后回去看el-form时候，才发现 v-model = 没有改成 :model，造成错误，在此更新一下。“el-formresetFields无效和validate无效如何解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！
本文小编为大家详细介绍“怎么使用pythonscatter绘制散点图”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么使用pythonscatter绘制散点图”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。用法:参数介绍:cmap主…
免责声明：本站发布的图片视频文字，以转载和分享为主，文章观点不代表本站立场，本站不承担相关法律责任；如果涉及侵权请联系邮箱：360163164@qq.com举报，并提供相关证据，经查实将立刻删除涉嫌侵权内容。
微信扫一扫 
