elementUI弹窗关闭清空表单以及校验规则
在Element UI中,如果需要在关闭弹窗的同时清空表单并移除验证规则,可以监听close
事件或者使用before-close
钩子来实现。以下是一个简单的例子:
<template>
<el-dialog
:visible.sync="dialogVisible"
@close="handleClose"
title="提示"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<!-- 其他表单项 -->
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submitForm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
form: {
name: '',
// 其他字段
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
// 其他字段的验证规则
}
};
},
methods: {
handleClose() {
this.$refs.form.resetFields(); // 清空表单
this.$refs.form.clearValidate(); // 清除验证规则
},
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过的逻辑
} else {
console.log('表单验证失败');
return false;
}
});
}
}
};
</script>
在这个例子中,handleClose
方法会在对话框关闭时被调用,我们通过引用表单实例调用resetFields
方法清空表单字段,并调用clearValidate
方法清除验证规则。这样,当用户关闭弹窗时,表单会被清空,并且之前的验证规则不会影响下一次打开弹窗时的表单状态。
评论已关闭