记录el-form+el-dialog表单重置问题

p_1024

关注

最新推荐文章于 2025-07-07 14:57:36 发布 · 1.4k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

解决elementUI中el-form、el-dialog、数据回显同时用时，有bug 第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值，点击修改后，关闭对话框的时候，置空失效了阅读详情

问题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()
      })
    }