el-dialog關閉後重置數據方法、注意事項

1. 需求

在使用element的對話框el-dialog過程中，需求需要el-dialog在沒有保存並且輸入框發生修改的情況下，在關閉窗口的時候將el-dialog中的el-form表單數據進行重置。

2. 遇到的坑

一開始，管它三七二十一，直接在el-dialog關閉的時候對錶單進行重置，但是進過我測試發現存在以下問題（項目中我是同類節點使用同一個表單）：

• 第一次在點擊一個節點進行編輯時候沒有保存el-dialog，這時候表單進行了重置（但是第一次怎麼重置你都看不出變化），但是第二次點擊另一個節點進行編輯，這時候沒有保存的情況下關閉el-dialog，那麼第二次的這個節點的數據將會被重置爲第一次點擊那個節點的數據（因爲共用同一個表單，這樣重置會造成數據的污染）

第一次點擊的對話框數據（然後將其取消關閉不進行保存）：

第二次點擊的對話框數據（還是將其取消關閉不進行保存）：

這時候查看第二次點擊的對話框對應的元素的數據如下圖：

發現第二次點擊的元素數據已經被重置爲第一次的元素的數據了。這只是一種坑的情況，所以在多個同類元素共享el-dialog中的表單時候不能直接對錶單進行重置，這樣會造成數據污染。

3. 解決方案

因爲這個情況的存在，所以我找了很多資料，發現大部分數據恢復都是直接重置表單，可能他們的需求跟我不一樣。後面我想了一種辦法，思路如下：

主要思想就是不要直接把數據和el-dialog中的表單綁定在一起，而是先將數據深複製給一箇中間變量再賦值給表單，當表單保存成功的時候再將中間變量的數據深度複製給當前元素的數據

---

第一部分代碼（將數據深度複製給一箇中間變量）

 //ele.data()是當前元素的數據，app.unchangedData是中間變量
app.unchangedData = JSON.parse(JSON.stringify(ele.data()));
//將中間變量複製給對應的表單，其中mapset1[ele.data('label')] + 'Form'是拼接的表單名稱可以忽略
app[mapset1[ele.data('label')] + 'Form'] = app.unchangedData; 

第二部分代碼（保存成功時將中間變量深度複製給當前元素）

update_ele.data(JSON.parse(JSON.stringify(app.unchangedData)));
//JSON.parse(JSON.stringify(app.unchangedData))爲深度複製，然後update_ele爲當前元素，data方法是我這邊有的給元素給元素複製的方法

到此提出了el-dialog對話框表單數據的恢復的主要思想，主要理解思想即可，有問題歡迎指出批評！！！！