el-dialog和el-form搭配使用时无法重置表单的问题

最新推荐文章于 2024-02-22 11:21:00 发布
原创 最新推荐文章于 2024-02-22 11:21:00 发布 · 545 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #elementui

博客聚焦模态框与表单组合出现无效的情况，提出解决办法。即在onReset()方法中做处理，等模态框加载完成后，执行反向绑定操作，将表单内容赋值给绑定对象，再进行重置操作。

前言

模态框+表单的组合十分普遍,你有没有遇到this.$ref[formName].resetFields()无效的情况?

解决

在onReset()方法中做一点小手脚

onReset(formName){
  this.$nextTick(() => {
        this.formLabelAlign = formName;//formLabelAlign是我form表单绑定的对象
      });
   this.$refs[formName].resetFields();
  }

原理就是等模态框加载全部完成以后,执行一个反向绑定的操作,表单填写的内容赋值给绑定的对象,然后再执行一遍重置操作

解决elementUI中el-form、el-dialog、数据回显同时用时，有bug
阿超的博客
10-29 4873
第一次打开网页，先点击修改，再点击新增，发现输入框竟然有值， 点击修改后，关闭对话框的时候，置空失效了
vue elementUI dialog弹框中使用表单 表单无法重置
shiqinghuan的博客
08-24 1403
用 nextTick 处理一下form的数据： this.$nextTick(() => { this.student = student; }) 然后在关闭dialog 时调用重置方法: this.$refs[student].resetFields(); 完整代码： <el-dialog title="添加学生信息" :visible.sync="dialogFormVisible" width="32%" :center="true" top="20px"&gt
elementui dialog中的form不能重置_ElementUI使用的二三事
weixin_34847426的博客
02-03 679
作者：TYANerelementUI是和vue配套的一个桌面端组件库。虽然是一个通用的组件库，但是由于使用场景的不同，我们可能会遇到一些小问题，以下是我个人的一、、总结。1、Tooptip文字提示tooltip使用时，必须有一个子元素（不能是文本元素）。2、修改主题色2.1 方案一：利用element UI的在线主题生成工具工具地址：https://elementui.github.io/them...
解决vue + element dialog弹框 表单无法重置问题
程序员柱子的博客
11-05 1640
问题：使用 el-dialog+表单发现无法使用 this.$refs[‘form’].resetFields()清空表单 问题分析：this.$refs[‘form’].resetFields()本质是将表单数据恢复至初始状态；打开表单之前el-dialog中的内容尚未渲染， // 修改按钮 handleUpdate (row) { this.open = true this.formData= JSON.parse(JSON.stringify(row))
el-table增加/编辑打开el-dialog内嵌套el-form，解决编辑重置表单不成功等问题
请叫我欧皇！的博客
02-22 1642
需求：在做表格的增删改查，其中新增和编辑弹窗都是同一个弹窗，之后有个重置按钮，需要用户输入的时候可以重置清空等。本文章解决如下问题1.就是在编辑数据回填后点击重置表单没有清空也没有报错2.解决清空表单和表格数据相互影响问题3.解决新增和编辑数据相互影响问题，保留了只添加数据暂存功能。
记录el-form+el-dialog表单重置问题
p_1024的博客
04-07 1454
element ui 表单无法重置问题
el-table中的el-input标签修改值，但界面未更新，解决方法
YaoQing222的博客
11-02 2249
el-table里的el-input未生效
elementui 再次打开dialog，绑定的数据不更新问题
popstarqq的博客
08-30 3732
1 因为dialog再次打开时不经过重新渲染dom，只是简单的显示隐藏，所以第一次打开绑定值后，关闭再打开则不会更新，解决办法是在外层套一层div，用v-if控制 <div v-if="editDialog_visual" > <el-dialog :area="[700,600]" top="middle" no-scrollbar title="人员编辑"
Dialog组件不刷新的问题
LAHM8963的博客
01-04 1842
同时监听visible和name的变化，只要弹窗打开，便获取设备名称，然后执行逻辑函数，问题解决。
el-dialog校验残留 重置校验失败 resetFileds失效的斗争
小菜鸡程序媛的挣扎史
01-09 1546
问题现象： 使用el-dialog作为子组件的时候，新增和编辑是同一个弹窗， 先打开编辑，取消，再打开新增弹窗会弹出校验。 先打开编辑 再打开 且关闭前会短暂显示之前编辑框的内容 问题分析： 首先 this.$refs.Form.resetFileds 是清空校验并重置为初值。 因为el-dialog是用 visible.sync 绑定的， 只是控制显示和隐藏，并...
el-dialog对话框重新打开后数据遗留问题
m0_57391092的博客
11-10 2227
场景：重新打开el-dialog对话框时，里面的表单数据遗留并没有清空 解决：监听el-dialog对话框的关闭事件，给el-dialog绑定@closed事件，再调用el-form表单的重置方法 示例： <el-dialog @closed="resetForm"> <el-form ref="formRef"> </el-form> </el-dialog> <script> export default {
el-dialog关闭后表单数据缓存没清空【已解决】
Astronaut224的博客
11-03 3840
系统中有新增和修改两个功能，共用一个对话框。要求新增时对话框内容为空，修改时内容默认填充旧数据。遇到的问题是，点击新增后内容填充了，关闭对话框再点击新增或者其他条目的修改，对话框内还是第一次打开的旧数据，没有清空。我遇到的这个问题，是误解了 resetFields 函数的功能。注意这个函数是将表单重置为初始值，要确定好初始值是啥。参考博客：https://blog.youkuaiyun.com/m0_67400973/article/details/123352141。
element dialog 关闭 form 表单校验未清除的解决办法
热门推荐
qq_40860137的博客
06-27 1万+
①开发背景:新增XX功能 点击之后 弹出的是el-form表单组成的dialog, 表单新增判空规则, 提交时表单项不合格, 会报错 如下图所示, 只有当表单项合格, this.$refs[formName].validate(asyncvalid=>{}) 中的valid才为true, ②在这种报错前提下, 我们关闭再打开dialog, 会发现报错信息还在。第一种办法(不可行), 在按钮点击的时候调用 this.$refs['accountForm'].resetFields(...
【轻松解决el-dialog关闭后数据缓存 没清空】
weixin_43690623的博客
10-26 9794
在使用el-dialog的时候，关闭弹窗之后，发现数据还是保存在上面，查资料试了那些方法，都不太行，最后琢磨出来这个最简单的方法，泪目。
element-ui dialog 子组件参数更新滞后
angus52630的博客
12-12 1267
项目场景： 使用element-ui dialog组件时，嵌套了一个子组件 问题描述： 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： <template slot-scope="{row}" > <el-button type="success" icon="el-icon-edit" plain circle @click="handleUpdate(row.code)"/> </templa
el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；
i_am_a_div的博客
10-25 3753
el-dialog的内容不刷新；el-dialog内容有缓存；el-dialog里面的组件不刷新问题；
关于在dialog中重置form表单失败的问题
z____Index的博客
07-03 728
使用el-dialog内嵌表单时候，发现表单重置失效，点击不同的数据，表单默认值不会发生改变。 解决办法 利用v-if重新渲染元素的特点，给el-dialog加上v-if <el-dialog class="addForm" title="添加" @close="reset" :visible.sync="dialogFormVisible" v-if="dialogFormVisible"> <el-form ref="formName" class="formName" m
el-form在el-dialog中不能刷新表单问题
qq_63520243的博客
01-29 782
this.show是控制dialog显隐的，由于我在发起请求之后显示dialog，所以，会造成刷新表单时，初始化会将上次编辑的内容作为模板进行初始化，即，删掉await 即可。我的表单中prop是完整的,我的编辑和新建公用一个表单，就出现了一个问题，当点击完编辑表单之后，新增表单时表单内容不清空。一般来说，问题普遍分为两个，但是我的是另一种很特殊的问题，在这里记录一下，
取消或关闭dialog时清空el-form数据
m0_61345222的博客
03-27 7728
1.添加关闭和取消的点击事件 // 关闭 <el-dialog title="添加:" :close-on-click-modal="false" :visible.sync="dialogFormVisible" @close="resetForm('form')"> // 取消 <el-button @click="cancel()">取 消</el-button> 2.添加方法 // 点击关闭时清空for
el-dialog内el-form表单样式优化
最新发布
01-01
### 优化 Element UI `el-dialog` 中 `el-form` 表单样式的策略 为了提升用户体验并使表单更加美观，可以采取多种方式来优化 `el-dialog` 内部的 `el-form` 组件样式。以下是几种有效的方法： #### 使用自定义类名调整布局 通过为 `el-form-item` 添加特定的 class 类，能够灵活控制各个输入项之间的间距以及整体外观。 ```html <template> <el-dialog title="用户信息" :visible.sync="dialogVisible"> <!-- 自定义class名称 --> <el-form label-width="80px" class="custom-form-style"> <el-form-item label="姓名" prop="name" class="item-name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="年龄" prop="age" class="item-age"> <el-input-number v-model="form.age"></el-input-number> </el-form-item> ... </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="closeDialog">取 消</el-button> <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button> </span> </el-dialog> </template> ``` #### 利用 CSS 进一步美化界面 借助外部样式文件或 `<style scoped>` 标签中的局部样式规则，可实现更精细的设计效果。例如设置不同的字体大小、颜色、边距等属性[^1]。 ```css <style scoped> .custom-form-style .el-form-item { margin-bottom: 20px; } .item-name, .item-age { font-size: 16px; color: #333; } </style> ``` #### 动态加载表单项以提高性能 当表单较为复杂时，考虑采用按需渲染的方式减少初始加载时间。利用 Vue 的条件渲染指令 (`v-if`) 和动态组件特性，可以在必要时刻才创建某些表单项实例[^2]。 ```javascript data() { return { dialogVisible: false, formLoaded: false, // 控制子组件是否显示 form: {} }; }, methods: { openDialog() { this.dialogVisible = true; setTimeout(() => (this.formLoaded = true), 50); // 延迟初始化表单内容 }, closeDialog() { this.formLoaded = false; // 销毁表单实例 this.$nextTick(() => (this.dialogVisible = false)); } } ``` #### 清除验证状态保持良好交互体验 为了避免不必要的错误提示影响操作流程，在关闭对话框之前应当重置所有已有的校验结果。这可以通过调用 `$refs['rules'].resetFields()` 方法完成。 ```javascript methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (!valid) return; // 提交逻辑... alert("提交成功！"); this.closeDialog(); }); }, closeDialog() { this.$refs.ruleForm.resetFields(); // 清理验证状态 this.formLoaded = false; this.$nextTick(() => (this.dialogVisible = false)); } } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

商朝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值