vue + elementUI 的dialog弹窗里面的form表单重置

在vue项目使用elementUI的开发过程中，经常会用到form表单。对于form表单的重置和清空校验经常会使用到，这里我对自己用到几种方法做一个总结：

1. Element UI自带的清空form表单方法

if(this.$refs.formData){
     //第一次打开dialog弹窗会报错，所以需要判断一下
	this.$refs.formData.resetFields(); //重置表单数据，清除校验信息
}

2. 手动重置formData里的每一项数据配合清空校验信息方法

this.formData.aa = '';
this.formData.bb = '';
this.$refs.formData.clearValidate(); //清除校验信息

3、在el-form标签上面添加v-if=‘dialogShow’，每次弹窗关闭再打开的时候el-form会生成一个新的表单

<el-dialog title="test" :visible.sync="dialogShow">
	<el-form v-if="dialogShow" ref="formData" :model="formData">
		-------
    </el-form>
</el-dialog>

4. 给el-form添加一个动态的key，因为vue底层是根据key值来做匹配的，每次关闭或打开弹窗对key的值自加1，使每一次打开弹窗时el-form的key值都不一样，vue会重新渲染一个form表单出来

<--代码块-->
 <el-dialog title="test" :visible.sync="dialogShow">
	<el-form :key="more" ref="formData" :model="formData">
		-------
    </el-form>
</el-dialog>

//data声明more
more:0

//打开弹窗方法里面
this.more++

这四个方法都适用于新建功能的弹窗，输入框填写赋值校验之后关闭弹窗然后再次打开弹窗时form表单的重置。
如果编辑和新建弹窗复用的是一个弹窗，这时推荐使用下面两个方法；因为如果先打开编辑弹窗，编辑会对form各项赋值，这时候resetFields会把赋值后的formData作为初始值，这时候打开新建弹窗初始值是不对的；如果手动清空formData的值再用clearValidate清除校验信息，这个时候校验信息清除不掉，也许是我写法的问题。
（个人推荐使用方法3）