模态框关闭后清除数据

$("#err_dept_modal").on('hide.bs.modal',function() {
        //关闭后重置表单数据
        window.location.reload();
       
    });

 

### Element Plus 关闭对话框并清除表单数据 为了实现关闭对话框时自动清空表单中的所有字段,可以采用Vue的数据响应特性来管理状态。具体来说,在定义组件内部维护一个用于存储初始值的对象`defaultFormData`以及另一个对象`formData`用来保存当前输入的状态。 当点击按钮触发模态框显示或隐藏操作时,通过监听可见性的变化事件(如`v-on:before-close`),可以在该回调函数里重置`formData`到原始默认值`defaultFormData`,从而达到清理效果[^2]。 下面是一个完整的例子展示如何做到这一点: ```html <template> <el-dialog :visible.sync="dialogVisible" width="30%" @before-close="handleClose"> <!-- 定义表单项 --> <el-form ref="ruleFormRef" :model="formData" status-icon :rules="rules"> <el-form-item label="姓名" prop="name"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="电话" prop="phone"> <el-input v-model="formData.phone"></el-input> </el-form-item> <!-- 更多表单项... --> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog">取 消</el-button> <el-button type="primary" @click="submitForm('ruleFormRef')">确 定</el-button> </span> </el-form> </el-dialog> </template> <script> export default { data() { return { dialogVisible: false, formData: {}, // 当前表单数据 defaultFormData: { name: '', phone: '' }, // 默认/初始化表单数据 rules: { name: [{ required: true, message: '请输入名字', trigger: 'blur' }], phone: [ { required: true, message: '请输入手机号码', trigger: 'change' }, { pattern: /^1\d{10}$/, message: '请输入有效的手机号码'} ] } }; }, methods: { openByParentMethod(){ this.dialogVisible=true; Object.assign(this.formData,this.defaultFormData); // 打开时恢复默认值 }, handleClose(done){ done(); // 需要调用done使对话框真正关闭 Object.assign(this.formData,this.defaultFormData); }, closeDialog(){ this.dialogVisible=false; Object.assign(this.formData,this.defaultFormData); }, submitForm(formName) { const form = this.$refs[formName]; if (!form) return; form.validate((valid) => { if (valid) { alert('提交成功!'); this.closeDialog(); } else { console.log('error submit!!'); return false; } }); } } }; </script> ``` 此代码片段展示了怎样创建一个带有基本验证逻辑的弹窗,并且实现了在取消或者确认之后都会将表单内容设置为空字符串的功能。每当用户尝试关闭窗口之前(`@before-close`),会先执行一次重置动作;同样地,“取消”按钮也关联了一个处理程序来做同样的事情[^3]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值