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对话框表单数据的恢复的主要思想，主要理解思想即可，有问题欢迎指出批评！！！！