element-ui+vue表单清空的问题

最近接触了个新项目，要求用element-ui作前端框架，写维护页面做添加修改时修改完成清空不了添加弹出框的表单数据，上网上查了下都是如下的回答

elementUI表单的清空问题

这种回答都是针对单独的添加/编辑表单来说的，现在开发为了节省代码量都是添加修改使用一个表单

在点击修改的时候，把点击行的值赋给添加的表单用来做修改回显，代码如下

<el-table-column label="操作" align="center" width="350px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="edit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="warning" @click="del(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>

edit: function(index,row){
    this.title = "编辑",//修改表单title
    this.addRuleForm = Object.assign({},row);//给表单赋值，回显单行数据
    this.addDialogFormVisible = true;//打开新增/编辑框
},

this.addRuleForm = Object.assign({},row);

这种写法实际上已经改变了表单的默认值，所以执行 this.$refs[addRuleForm ].resetFields()时才会没有效果，

中间想过用this.addRuleForm = "";的方式清空，这样虽然清空成功了但是把表单里面的属性也清空了，就导致只能新增一次，成功之后再次打开新增框会发现输入框输不进去值

也想过用this.addRuleForm .属性1 = “”；this.addRuleForm .属性2 = “”；this.addRuleForm .属性3 = “”；...的方式清空，这样虽然也成功了，但是再次打开添加框的时候又会触发表单的rules验证！

最后没有办法了就想着再赋一次值吧，直接赋成undefined,不信它还有值，

// 取消弹出框
        cancel: function(formName) {
            if (this.addDialogFormVisible){
                this.addDialogFormVisible = false;
            }
            this.addRuleForm=Object.assign({}, undefined);//重置表单
            this.$refs[formName].resetFields();
        },

这样写暂时达成了需求，但是总觉得有些不合适，各位大佬有没有正确的办法？

2020.06.15

element clearValidate()移除表单校验

两个方法结合一下