（笔记）解决element的Dialog对话框关闭后清除数据残留及校验规则

最新推荐文章于 2024-07-01 17:37:34 发布

咔咔_

最新推荐文章于 2024-07-01 17:37:34 发布

阅读量1.6k

点赞数 6

文章标签：笔记 vue.js

本文链接：https://blog.csdn.net/qq_57557454/article/details/132842932

版权

由于添加和修改用的是同一个Dialog导致数据残留，试过用官网的重置验证规则this.$refs[formName].resetFields()，也试过使用 v-if 控制Dialog的存在，但都不起作用。

最后终于解决了，步骤如下：

1. 给Dialog的关闭按钮绑定事件

2. 事件回调的代码如下

clearForm() {
// 清空表单数据
    Object.assign(this.$data,this.$options.data())

// 在下一次DOM更新循环结束后执行延迟回调
    this.$nextTick(()=>{
// 清空校验规则
       this.$refs['activity'].clearValidate()
 })
// 隐藏对话框
    this.activityFormVisible = false
}