elementui 关闭弹出层表单验证
时间: 2023-07-19 14:07:59 浏览: 91
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
如果您使用的是 ElementUI 的弹出层组件 ElDialog,可以通过设置 `before-close` 属性来关闭弹出层时的表单验证。具体做法如下:
1. 在 ElDialog 上添加 `before-close` 属性并指定一个关闭前的回调函数,例如:
```html
<el-dialog
title="弹出层标题"
:visible.sync="dialogVisible"
:before-close="handleClose">
<!-- 弹出层内容 -->
</el-dialog>
```
2. 在回调函数 `handleClose` 中禁用表单验证,例如:
```js
methods: {
handleClose(done) {
// 禁用表单验证
this.$refs.form.validateOnRuleChange = false;
// 关闭弹出层
done();
}
}
```
在回调函数中,我们将表单的 `validateOnRuleChange` 属性设置为 `false`,以禁用表单验证功能。最后,调用 `done()` 方法来关闭弹出层。
注意:如果您使用的是 ElDialog 中的表单组件 ElForm,需要通过 `$refs` 属性获取到 ElForm 并设置其 `validateOnRuleChange` 属性。
阅读全文