element-ui 解析新增和编辑。里面点击按钮上的click事件为什么要那样写？

 

1.首先新增页面我们把定义的新增要填的表单绑定的model值全部又写了一遍，和上面data里面定义的格式是一样的，为什么呢？是多此一举吗？

当然不是。因为每次点击弹窗新增的表单都必须是置空的。而我们从新写了一遍定义时的数据相当于把他置空了。

 

2.编辑的时候怎么保证打开的页面直接显示的就是当前行的数据呢？这样靠this.editForm = Object.assign({}, row);这句代码。意思是：)//复制一个对象。就是把当前行的内容作为对象都复制出来给了this.editForm。当前定义的editForm的data一定要看着那个table定义的字段的名字(就是上面那个affairtypes数组)来哦。否则可能是不显示了。

3.注意新增和编辑时定义的model绑定的字段的名字。最好是和那个table里面对应的字段名字写的一样的。这样就不用再转换了

 

4.新增的表格提交了以后要清空数据。点击新增的时候清空一下。提交成功以后清空一下。不成功不要清空，因为你报错了他可能就修改好了在提交的。

上面写了点击新增时的清空，下面介绍提交后的清空。

this.$refs['editForm'].resetFields();  这个是清空ref="editForm"的表单的。

你会发现在点击新增时用这个清空不行。报错因为点击新增的时候新增的页面里面的dom还没有加载出来。你可以用this.$nextTick(()=>{this.$refs['editForm'].resetFields(); })也是和一个个元素的置空一样的效果的。