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()移除表單校驗

兩個方法結合一下