解决element 表单验证不通过的俩大坑

最新推荐文章于 2024-01-02 11:39:59 发布

萌新之路

最新推荐文章于 2024-01-02 11:39:59 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： element vue

本文链接：https://blog.csdn.net/qq_44162778/article/details/118224035

vue 同时被 2 个专栏收录

49 篇文章

订阅专栏

element

11 篇文章

订阅专栏

本文分享了解决Element UI中表单验证失效的具体步骤，包括如何修正嵌套el-form导致的问题、使用this.$set更新表单数据以及避免在提交前重置表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文章解决本人项目中遇到的俩大坑（希望对遇到同样问题的你们有帮助）

问题场景：

在封装的表单组件中实现非空验证

问题描述：

1、修改时失去焦点时验证有作用 然后点击表单提交验证没作用，不管有没有内容，验证都通过
2、添加时输入了内容，检查了 :model,prop,ref等都没有问题，但是始终验证不通过提示不能为空
3、添加表单验证通过了后，点击提交时对象中的属性全部为空值了

解决问题：

1、第一个问题导致提交验证失效的原因是因为我嵌套了两层el-form标签导致的（我觉得应该是因为有两层el-form 导致表单验证不知道去指向哪个）
在这里插入图片描述
2、第二个问题我找了很久是因为我把添加表单里面的值赋空时导致的
最开始我是这样写的

然后我就在想是不是因为我直接用 = 来赋值导致的控制台能打印出来，但是却没有更新到视图上

//点击添加按钮
  add(){
    this.add_form = {};
    this.update_Add_Visible = true;
    for(let i = 0; i < this.config.table.length; i++){
      console.log("this.",this.add_form)
      this.$set(this.add_form[this.config.table[i].key],"");
    }
 }

用了this.$set 然后表单验证就ok了，嗯。。。。

3、第三个问题是第二个问题解决后遇到了，原因很简单就是因为
我在提交的方法里面写了一句代码，导致的删除掉就ok了

this.$refs['add_form'].resetFields()//清除表单数据