在 closed 回调中先将 form 对象重置为初始值(跟 data 中的值相同),然后在 $nextTick 中使用 clearValidate 清除校验状态即可。这样做的好处(跟其他解决方式相比)是没有任何使用体验上的损失。
<el-dialog :visible.sync="dialogVisible" @closed="dialogClosed" >
<el-form :model="dialogForm" :rules="rules" ref="dialogForm">
//...
</el-form>
</el-dialog>
data () {
return {
dialogForm: {
foo: 123,
bar '',
},
}
},
methods: {
showDialog () {
this.dialogVisible = true;
// 如果需要给弹框中的表单填充默认值,需要将一个新对象赋给它,
// 而不是通过给原对象添加属性的方式,否则第二次打开弹框后还是会显示之前的校验信息
this.dialogForm = {
id: 1,
name: '张三',
age: '118',
}
},
dialogClosed () {
this.dialogForm = {
foo: 123,
bar '',
};
this.$nextTick(() => {
this.$refs.dialogForm.clearValidate()
})
},
},