el-dialog关闭后重置数据方法、注意事项

最新推荐文章于 2025-03-12 11:28:26 发布
最新推荐文章于 2025-03-12 11:28:26 发布
阅读量6.1k 收藏 3
点赞数 4
分类专栏： 前端 文章标签： vue.js element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fufu_good/article/details/104959566
版权
本文探讨了在Vue.js项目中使用Element UI的el-dialog组件时，如何在关闭未保存且表单有修改的情况下重置数据，避免数据污染。解决方案是通过中间变量实现数据深复制，确保多个节点编辑时的独立性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 需求

在使用element的对话框el-dialog过程中，需求需要el-dialog在没有保存并且输入框发生修改的情况下，在关闭窗口的时候将el-dialog中的el-form表单数据进行重置。

2. 遇到的坑

一开始，管它三七二十一，直接在el-dialog关闭的时候对表单进行重置，但是进过我测试发现存在以下问题（项目中我是同类节点使用同一个表单）：

  • 第一次在点击一个节点进行编辑时候没有保存el-dialog，这时候表单进行了重置（但是第一次怎么重置你都看不出变化），但是第二次点击另一个节点进行编辑，这时候没有保存的情况下关闭el-dialog，那么第二次的这个节点的数据将会被重置为第一次点击那个节点的数据（因为共用同一个表单，这样重置会造成数据的污染）

第一次点击的对话框数据（然后将其取消关闭不进行保存）：
在这里插入图片描述
第二次点击的对话框数据（还是将其取消关闭不进行保存）：
在这里插入图片描述
这时候查看第二次点击的对话框对应

最低0.47元/天 解锁文章
vue使用el-dialog关闭后重置数据的最佳方法
weixin_33701617的博客
04-22 2万+
此方法试用所有需要重置数据的场景 el-dialog打开一次之后，再次打开之前的数据不会销毁，依然存在。 我们需要在关闭后重新初始化数据。 重置表单的方法 this.$refs[formRef].resetFields(); 复制代码有些数据不是表单中的数据，也需要重置。 难道一个个的重新手动赋值吗？当然可以，就是比较麻烦。好在vue帮我们保存了一份原始数据，直接把data复制为原始数据即可 th...
element ui里dialog关闭后清除验证条件方法
12-29
关闭dialog触发事件 //vue <!--添加用户dialog begin--> <el title=编辑用户 visible.sync=dialogFormVisible custom-class=editDialog close-on-click-modal=false xss=removed xss=removed size='tiny'> <el-form :model=ruleForm :rules=rules ref=
el-dialog（新增功能）弹窗关闭后重置表单数据
qq_44447607的博客
06-07 944
(最开始写代码的时候是写一个空的对象，数据和form保持一致，然后把对象赋值给form来达到置空的效果，人还是得多学习！
element ui 对话框el-dialog关闭事件详解
01-21
通常会有需求，在关闭弹框后需要清空填写的数据，这时候就需要关闭事件了 <el title=标题 visible.sync=bind size=small close='closeDialog'> </el> 在标签中加入@close=’closeDialog’ mothods中加入 //关闭弹框的事件 closeDialog(){ this.xxx = '';//清空数据 }, 以上这篇element ui 对话框el-dialog关闭事件详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
el-dialog(vue3 总结)
qq_38210427的博客
03-12 263
之所以会产生这种问题，是因为elementUi在对Dialog组件做初始化的时候，默认让该Dialog在点击组件以外区域会导致该组件关闭，所以elementUI 一定会将该属性暴露出来让开发人员进行配置。通过查询ElementUI的官方文档，发现在Dialog下有个‘close-on-click-modal’属性，该属性默认值为‘True’，作用为：是否可以通过点击 modal 关闭 Dialog。所以，通过设置Dialog下的close-on-click-modal属性为‘false’，即可解决该问题。
el-dialog关闭后清除校验以及重置数据
yangqii的博客
05-13 4609
参考文章：vue使用el-dialog关闭后重置数据的最佳方法 （1）el-dialog绑定close事件 （2）close事件内定义关闭窗口后需要做的操作 1、清除表单校验---this.$refs[formName].clearValidate() //this.$refs.formName.clearValidate() 2、重置数据 （1）this.$refs[formName].resetFields() //this.$refs.formName.clearValidat...
Vue使用el-dialog关闭后重置表单
zezejingi的博客
01-14 4569
Vue使用el-dialog关闭后重置表单
关于elementui中dialog关闭时重置表单
weixin_44693550的博客
08-26 2921
在关闭el-dialog对话框后，再次打开dialog，表单依然显示上次的信息。
el-dialog中多选框数据回显
03-09
#### 关于 `el-form` 和 `resetFields` 的注意事项 需要注意的是，如果页面上存在多个可能影响同一组字段的操作（比如编辑和新建），那么应当特别小心管理这些共享的状态。因为 `el-form` 的 resetFields 功能可能...
</el-dialog
01-18
#### 封装 Dialog 组件注意事项 针对 vue3 下封装公共组件过程中遇到的数据传递难题——即无法直接更改来自父级传入 props 属性值的现象，这是因为遵循单项数据流原则所致。此时应该利用 emit 函数通知上级做出相应...
<el-dialog title="管理员信息" v-model="data.formVisible" width="400" destory-on-close> <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="110px" style="padding-right: 60px; padding-top: 20px" > <el-form-item prop="username" label="账号" > <el-input v-model="data.form.username" autocomplete="off" placeholder="请输入账号"/> </el-form-item> <el-form-item label="姓名" prop="name"> <el-input v-model="data.form.name" autocomplete="off" placeholder="请输入姓名" /> </el-form-item> <el-form-item label="手机号" prop="phone"> <el-input v-model="data.form.phone" autocomplete="off" placeholder="请输入手机号" /> </el-form-item> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="add">保 存</el-button> <el-button @click="data.formVisible=false">取 消</el-button> </div> </template> </el-dialog>为什么destroy-on-close不生效
03-15
好的，用户问的是为什么在Vue.js的Element Plus组件中，使用`<el-dialog>`时设置`destroy-on-close`属性后没有生效。我需要先回忆一下Element Plus的文档，确认这个属性的正确用法。 首先，用户提供的代码中属性是`...
<template> <div class="app-container"> <!-- 操作工具栏 --> <div class="mb-4"> <el-button type="primary" @click="showFormDialog()">新增分类</el-button> </div> <!-- 树形表格 --> <el-table :data="tableData" row-key="id" :tree-props="{children: 'children'}" border style="width: 100%" > <el-table-column prop="id" label="ID" width="80"> <template #default=“{ row }”> <template v-if=“row.children && row.children.length > 0”> {{ row.id }} </template> <span v-else class=“empty-id”></span> </template> </el-table-column> <el-table-column prop=“title” label=“分类名称” /> <el-table-column label=“操作” width=“180” align=“center”> <template #default=“{ row }”> <el-button type=“primary” size=“small” @click=“showFormDialog(row.id)” >修改</el-button> <el-button type=“danger” size=“small” @click=“handleDelete(row.id)” >删除</el-button> </template> </el-table-column> </el-table> <!-- 表单对话框 --> <el-dialog v-model="formVisible" :title="currentId ? '修改分类' : '新增分类'" width="30%" > <el-form ref="formRef" :model="form" :rules="rules" label-width="80px" > <el-form-item label="分类名称" prop="title"> <el-input v-model="form.title" placeholder="请输入分类名称" /> </el-form-item> </el-form> <template #footer> <el-button @click="formVisible = false">取消</el-button> <el-button type="primary" @click="submitForm">确认</el-button> </template> </el-dialog> </div> </template>要求点击新增分类时弹出的对话框里再加一个上级选择,用select树形结构数据展示,给出vue3的全部代码
最新发布
03-22
Element Plus的el-select支持树形数据，所以应该用el-tree-select组件或者结合el-tree和el-select？不过Element Plus中树形选择可以用el-select配合el-option的树形结构，或者可能需要使用第三方组件，但用户可能...
el-dialog做新增和编辑关闭时重置表单数据并清除提示
Suk__的博客
04-10 1635
我们在做新增和编辑共用一个弹窗时,弹窗关闭后需要重置el-form的数据并清空提示,如果是先编辑关闭的,那么resetFields方法会把编辑的数据做为初始化的数据,所以在打开新增时就会看到数据状态并没有清空,校验提示也在,解决方法: onClose() { this.$refs.form.resetFields(); Object.assign(this.formData, this.$options.data().formData); }, 在el-dialog关闭的回调里
解决：elementUI中el-dialog关闭后，再次打开保持初始化
枯萎花一朵
09-09 2195
visible.sync 与 v-if 保持一致。el-dialog添加v-if可以解决。打开编辑框，会显示上次状态。
Vue加ElementUi中的自定义表单校验以及Dialog取消后重置校验
qq_44906497的博客
09-21 1025
给关闭按钮绑定点击时间，并在点击时间中清除校验提示和表单数据。给 dialog 添加属性。
【轻松解决el-dialog关闭后数据缓存 没清空】
weixin_43690623的博客
10-26 9533
在使用el-dialog的时候，关闭弹窗之后，发现数据还是保存在上面，查资料试了那些方法，都不太行，最后琢磨出来这个最简单的方法，泪目。
（笔记）解决element的Dialog对话框关闭后清除数据残留及校验规则
qq_57557454的博客
09-12 1932
由于添加和修改用的是同一个Dialog导致数据残留，试过用官网的重置验证规则this.$refs[formName].resetFields()，也试过使用 v-if 控制Dialog的存在，但都不起作用。1. 给Dialog的关闭按钮绑定事件。2. 事件回调的代码如下。
Element-plus dialog关闭或者销毁或者保存成功时，重置form
jso_cc的博客
07-16 1434
重置的form的子菜单el-form-item里面必须包含prop选项。vue3取消了vue2的this，不过有替代品。form里面必须设置ref=“formRef”menu_title对应form里面的字段。之后就可以使用proxy替代this。最后直接到保存成功里面回调。...
表单取消重置数据操作，登录时表单全部校验
mfxcyh的博客
04-19 395
1.在<el-dialog> 标签中绑定关闭触发事件 <el-dialog v-model="editDialogVisible" title="修改用户" width="40%" @close="editDialogClosed"> 2.在<el-form>标签中添加ref属性 <el-form :model="editForm" ref="editFormRef" label-width="80px">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值