element ui el-dialog弹窗+表单缓存问题

碰到过几次弹窗里放表单,第二次打开表单还继续保留上一次打开时的数据。今天又再次碰到,记录下解决方案。

我项目用的表单组件都是经过二次封装好的:
element ui el-dialog弹窗+表单缓存问题_第1张图片
element ui el-dialog弹窗+表单缓存问题_第2张图片
一般想到的解决思路就是,在关闭弹窗的时候给form表单的每个字段置空,但是如果这个表单里有select,由于select时在change时会进行校验,会导致每次打开弹窗看到自动校验结果的提醒
在这里插入图片描述
所以我的解决办法是,在表单组件外层套一个div,加上v-if,关闭弹框时把表单销毁,然后给表单字段置空,这样就不会出现select校验了。

element ui el-dialog弹窗+表单缓存问题_第3张图片
目前想到的比较笨的方法~

你可能感兴趣的:(Vue.js,JavaScript,Web)