element的表单重置表单并用clearValidate消除校验

在用Element的表单时，我们经常采用的el-dialog弹窗来填写表单内容，在新增和编辑时打开弹窗。有时我们在填写完数据没有保存有删掉了表单的内容，这时触发了表单的校验，然后我们关闭了弹窗。然后我们重新新增打开弹窗，发现之前的表单校验还没有消除，这时就需要在关闭弹窗的方法中进行处理。

handleClose:function(){
    var _this = this;
    _this.resetFormData();//重置表单,就是将表单的每一项置空
    _this.dialogVisible=false;//关闭弹窗
    setTimeout(function () {
        _this.$refs['formMsg'].clearValidate();//消除校验,这里的setTimeOut不能去掉,去掉之后会不生效
    },30);
},

 

常见问题:

我只想消除某个 表单项的校验
在clearValidate()里以数组形式 填写表单字段的 prop属性值,

if (sn != null && sn != "") {
    setTimeout(function () {
        app.$refs['formMsg'].clearValidate(['sn']);
    },30);
}

 

为什么消除校验不生效
需要用setTimeout包裹
重置表单为什么不用resetFields()
resetFields()方法只是将表单的各项还原为初始值。如果我们在页面加载成功之后，先点击编辑回显数据，这时表单已被赋值。那么这时表单的初始值就是有值的并不是空，所以在关闭弹窗之后，我们再点新增，发现表单的输入框依然还存在值。那么这样就是有问题的。