Element-UI有关el-dialog弹窗关闭时的一些注意项

1,428 阅读1分钟

1、设置点击空白处弹窗不关闭

通过全局设置:在main.js中设置:

ElementUI.Dialog.props.closeOnClickModal.default = false

image.png

2、设置弹窗关闭时清空弹窗中的表单验证样式

(1)、先描述一下这个问题:

在第一次新增时,不填写数据,表单验证效果出现,当你点击取消或者右上角叉号后,再次进行新增或者修改操作,弹窗中表单会出现上一次的验证效果。

image.png

(2)、解决方法:

在el-dialog弹框中加一个v-if,其中条件和弹窗的visible.sync的条件相同;

image.png

3、在关闭弹窗后清除表单数据

(1)、给表单加上:ref="formRefs"

(2)、关闭弹窗的时间里面加上以下代码即可:

this.$refs.formRefs.resetFields()