el-dialog中的x这么清空校验
时间: 2023-07-28 10:32:34 浏览: 95
基于element-ui对话框el-dialog初始化的校验问题解决
5星 · 资源好评率100%
如果您想清空 el-dialog 中的表单校验,可以通过以下步骤实现:
1. 在 el-dialog 的 `beforeClose` 属性中添加一个函数,该函数会在 dialog 关闭之前被调用。
2. 在函数中获取 el-form 组件的引用,并调用其 `resetFields()` 方法来重置表单。
3. 如果您的表单中包含自定义的校验规则,可以在 `resetFields()` 方法中传递一个空对象,以清空表单的校验状态。
以下是示例代码:
```
<el-dialog :visible.sync="dialogVisible" :beforeClose="handleClose">
<el-form ref="form" :model="form" :rules="rules">
<!-- 表单内容 -->
</el-form>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false,
form: {
// 表单数据
},
rules: {
// 表单校验规则
}
}
},
methods: {
handleClose(done) {
// 获取表单组件的引用
const form = this.$refs.form;
// 重置表单
form.resetFields();
// 关闭 dialog
done();
}
}
}
</script>
```
希望能帮到您!
阅读全文