关于vue + elementUI 的dialog弹窗清空弹窗内值的问题

近来比较繁忙，所以博客近期一直没有更新，今天就来和大家说说关于elementUI dialog弹窗清空值的问题在vue + elementUI项目中有时候会大量的用到弹窗这个组件，所以就对这个组件进行了统一封装。但是对于弹窗中的值的清空问题就有些麻烦了。当dialog 中嵌套的是form表单时，我们可以使用Element UI自带的清空form表单方法this.$refs.formData.res

终端鹿

6438人浏览 · 2021-06-22 16:02:29

终端鹿 · 2021-06-22 16:02:29 发布

近来比较繁忙，所以博客近期一直没有更新，今天就来和大家说说关于elementUI dialog弹窗清空值的问题在vue + elementUI项目中有时候会大量的用到弹窗这个组件，所以就对这个组件进行了统一封装。但是对于弹窗中的值的清空问题就有些麻烦了。

当dialog 中嵌套的是form表单时，我们可以使用Element UI自带的清空form表单方法
```
this.$refs.formData.resetFields(); //重置表单数据，清除校验信息
```

或者手动的去重置清空表单数据

this.formData.xxxx：''
this.formData.xxxx: []
……

给表单或者dialog组件添加v-if，当弹窗每次打开的时候就会清掉弹窗内的值

<el-dialog title="收货地址" :visible.sync="dialogFormVisible"/>
	<el-form :model="form" v-if="dialogTableVisible"/>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^