问题1:使用this.$refs[formName].resetFields()方法,表单无法重置
原因:resetField()方法不是将表单重置为空,而是重置为初始值
所以当我们打开新建表单的时候,表单项绑定的属性值为空,在提交表单后,表单项绑定的值不为空,此时再打开新建表单是会有上一次的值出现,此时resetField()方法是无法清空表单的,因为在这次操作的时候,属性初始值就不为空。
原博客:
https://blog.csdn.net/focusmickey/article/details/108646541
问题2:表单校验结果无法移除,再次打开时,会直接校验表单
出现这样"Cannot read property 'resetFields' of undefined"或者"Cannot read property 'clearValidate' of undefined",
问题分析:刷新界面后第一次新增,此时表单内的dom还没有加载完成就执行了"Cannot read property 'resetFields' of undefined"或者"Cannot read property 'clearValidate' of undefined",这样就导致报错。
原博客:
vue项目element-ui框架中的弹窗中的表单验证清除问题 - 只争朝夕,不负韶华 - 博客园
解决方法:
// 弹窗关闭动画结束后事件
closedFn() {
// 重置表单
this.formDialog = JSON.parse(JSON.stringify(this.newFormDialog))
// 等弹窗里的form表单的dom渲染完在执行this.$refs.staffForm.resetFields(),去除验证
this.$nextTick(() => {
// 移除表单校验结果
this.$refs.formDialog.clearValidate()
})
}