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

ゝ一世哀愁。 2022-11-26 12:00 753阅读 0赞

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

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

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

1.  手动重置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>

1.  给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）