vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作

在项目中做联系人的添加和编辑功能，点击父级页面的添加和编辑按钮，用的是同一个表单弹窗，数据添加和编辑用同一个弹窗，没有在弹窗使用v-if，性能不是很好，弹窗中有表单，在编辑弹窗表单数据之后关闭弹窗，然后点击添加的时候，弹窗里的表单数据还是之前编辑的数据，无法做到清空表单数据，接下来是解决方法了，嘿嘿

首先是不管是添加还是编辑，都需要将子组件需要的对象属性一一写出来，传给子组件，

然后是主要用到了el-form表单有一个清空重置表单数据的事件方法resetField()，在子组件表单弹窗打开的时候清空一下，在关闭子组件表单弹窗的时候还需要调用resetField()去重置表单数据。这样编辑数据之后再次打开添加数据，页面不会有之前的数据存在，也不会出现验证信息在页面上。

1. 在父级页面调用子级弹框表单组件(AddEdit.vue)

2. 点击父级页面的编辑按钮，将人员信息传递给AddEdit.vue

好了，问题解决了，在此记录一下，以后可以翻回来再看看！

以上这篇vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。