關於element-ui表單的新增和編輯遇到的問題：
有時候會出現使用this.$refs.form.resetFields()表單重置失效的問題：
在resetForm()基本使用方法沒錯的時候，頻繁用點擊編輯按鈕打開表單彈窗載關閉彈窗後，再新增表單時會發現表單並未在彈窗關閉時清空，並且使用重置按鈕再直接重置表單也無法清空表單；
eg:
編輯操作：
handleEdit(row){
this.visible=true;//召喚出彈窗
this.form.id=row.id
}
新增操作:
handleAdd(){
this.visible=true;//召喚出彈窗
if (this.$refs.form !== undefined){
this.$refs.form.resetFields()；//重置表單
}
}
重置操作：
clearForm(){
this.$confirm("確認重置？重置後會失去您填寫的所有信息").then(() => {
if (this.$refs.form !== undefined){
this.$refs.form.resetForm()；//重置表單
}
});
}
首先分析一下resetForm()方法，該方法所謂的重置表單並非將表單置空，而是將表單置爲你設置的那個初始值，並且清空表單的驗證狀態；在你使用編輯或者新增按鈕‘召喚’出表單彈窗時候，表單這部分dom元素會創建和銷燬，而於vue的生命週期而言，在created時期，dom元素更新還未完成，而你對彈窗操作都是一些對dom進行click事件調用，created時期在dom還沒更新完成時候你進行的dom操作是不會生效的，那自然而然重置操作會發生沒有執行的情況，當重置操作沒有執行的時候，當你下一次點開彈窗的時候，表單就會把未重置的數據當成初始值，自然而然你之後的重置操作不會生效；
解決方法：使用$nextTick()方法：在表單的數據發生改變後立即執行相應的dom操作；
新增：
handleAdd(){
this.visible=true;//召喚出彈窗
this.$nextTick(()=>{
if (this.$refs.form !== undefined){
this.$refs.form.resetFields()；//重置表單
}
})
}
編輯：(點擊編輯彈窗，在dom更新後在賦予表單該行的值，以防把之前未能清空的數據當作初始值，以至於之後重置都會重置爲這個值)
handleEdit(row){
this.$nextTick(()=>{
this.visible=true;//召喚出彈窗
this.form.id=row.id
}
)
}
博主也還在vue學習之路上，有的東西根據自己的理解來寫的，且理工男表達會很混亂，理解有誤的地方請予以指出！
附上我在解決問題時看的兩篇博客的鏈接，感謝這兩位優秀的博主的文章：
1.https://www.jianshu.com/p/b95ea1388fc6
2.https://blog.csdn.net/zhouzuoluo/article/details/84752280