element ui 中的 resetFields() 報錯'resetFields' of undefined

　　每次作各類form表單時，首先要注意的是初始化，可是剛開始若沒有仔細看文檔，則會本身寫個方法將數據設置爲空，可是這樣就會出現一個問題，表單內存在各類驗證，假如是一個彈框內有form表單，彈框出現就執行上述代碼，可能會出現表單驗證的錯誤提示仍然保留的狀況。

element UI 官方文檔提供了一個resetFields()的方法

this.$refs[formName].resetFields()

不只能夠幫你初始化數據，還能夠將驗證提示消除！！！

可是在使用時踩了一些坑，

編輯和新增使用了同一個彈出框<el-dialog><el-form></el-form></el-dialog>
綁定了數據data裏的commentForm對象
爲了在新增彈出框清空表單, 使用了this.$refs[formName].resetFields()
每次第一次點擊新增顯示彈出框，都會報錯
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""

問題緣由： mouted加載table數據之後，隱藏的彈出框並無編譯渲染進dom裏面。

因此@click="dialogFormVisible = true;resetForm('dlgForm')"click彈出的時候$refs並無獲取到dom元素致使 'resetFields' of undefined

解決方法：

一、($nextTick dom下一次更新以後)

resetForm(formName) {
                this.$nextTick(()=>{ this.$refs[formName].resetFields(); }) },

二、(若是是第一次就點擊新增就不必reset, 根據元素undefined判斷)

if (this.$refs[formName] !== undefined) { this.$refs[formName].resetFields(); }

注意事項：對DOM一系列的js操做最好都要放進Vue.nextTick()的回調函數中