在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)