使用场景

表格中添加表单和编辑表单共同使用一个el-dialog组件，在@close事件中自定义了一个handleClose事件用于关闭弹窗和清空表单的数据与校验规则，代码如下

data() {
    return {
        dataForm: {} // 用于回显数据
    }
},

methods: {
    handleClose() {
        this.visible = false
        this.dataForm = {}
        // ...
    }
}

我直接把dataForm清空为空对象，这会导致一些问题： 1、首先，根据el-dialog源码，this.visible = false并没有销毁这个组件，而是通过v-show指令隐藏了这个组件而已

2、this.dataForm = {}重置为空对象，在没有刷新当前页面的情况下，再次打开el-dialog组件时并没有触发组件的生命周期钩子，打印dataForm数据，虽然有数据，但不是--响应式数据

清空之前的数据：（响应式对象）

清空之后再次回显数据：（普通对象）

综上所述，当你使用上面的那种方式去清空表单，当你再次打开el-dialog去编辑的时候会导致你无法输入

解决方法

使用v-if指令将el-dialog组件销毁。