关于elementUI表单验证的重置，一般多用于dialog的情况

在做中后台管理系统的时候，一般会有弹窗表单的出现，此时就需要添加表单的重置功能，防止每次打开的时候 上次的信息遗留

下面说重点

1 给所有的表单项添加 prop

2 需要在el-form上添加  :model / ref ，这两项是验证必须的  但如果在没有:rules或者：rules中没有对应规则的时候是不会进行验证的

这里其实要说下elementui验证之后的重置是分两种的

1 表单各项规则的验证，验证时候将 各种提示文字及样式进行清空

2 将各个表单的字段进行重置（添加prop之后，在初始化完毕之后,vue应该是进行了初始字段的缓存【需要注意的是，如果在其缓存之前进行字段赋值，则缓存的是赋值之后的值~，在进行重置的时候自然也是恢复到赋值之后】）

 

下面上代码看下~

      
        
          
        
        
          
        
        
          
          
        


// data
visible: false,
form: {
    price: '',
    price2: '',
    date: ''
},
rules: {
    price: [{}] // 验证规则
}
// rules中具有的验证规则 在验证的时候才会进行验证


// methods
// @close方法 会在弹层关闭之后执行（无论是弹层外/右上角x号/取消/确定  都会走）
dialogClose(type) {
    this.$refs[type].resetFields()   // 这里就是重置表单了~
    this.visible = false
}

所以 感觉比较好的做法就是

遇到dialog类型的表单，在写的时候就把所有的prop都添加上！

然后在rules中只写自己需要进行验证的字段就好