1. 程式人生 > 實用技巧 >elementui 使用Form表單 的 resetForm表單功能出現的問題

elementui 使用Form表單 的 resetForm表單功能出現的問題

程式碼因為在保密機上,這裡只進行描述並擷取elemen檔案中的程式碼作為參考

今天在開發一個很簡單需求的時候遇到的問題,在使用elementui的表單功能,將增和改的表單進行了複用,是在表單的父元件 drawer 的 close 事件中進行resetForm ,但事實上先點選edit按鈕 再點add按鈕後,表單並沒有進行預期的重置

經過對elementui元件中原始碼的邏輯檢視,發現問題出在了resetFields()這個方法上,這個方法呼叫的時候會先將form中的props 內容儲存,然後當使用者對錶單進行編輯之後,關閉drawer,觸發resetForm事件,resetFields()方法會將表單重置

為之前儲存的form中的props內容,而並不是像想象中將表單中的props直接清空。 因此需要在觸發事件中加上settimeout 或者 tick 方法,等待dom將表單渲染完成後再儲存空的form中的props。

今天為了這個bug console了全元件的變數,最終發現了問題,希望世界沒有BUG