elemenui el-dialog中el-form表单的resetFields失效问题

已于 2023-07-14 12:03:58 修改
阅读量930 收藏 1
点赞数
文章标签： vue.js javascript elementui
于 2022-07-07 20:52:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39540108/article/details/125666642
版权
本文探讨了在elemenui的el-dialog组件内，el-form的resetFields方法失效的问题。问题在于resetFields只会重置到弹窗打开时的表单值，而非初始data值。为了解决这个问题，推荐在script中定义初始form模型，并在需要初始化时复制此初始值，以实现表单重置。
摘要由CSDN通过智能技术生成

elemenui el-dialog中el-form表单的resetFields失效问题

1、其中resetFields方法执行逻辑

el-dialog弹出时会记录此时el-form的model值，this.$refs.form.resetFields(）执行效果就是将el-form的model值恢复到之前纪录的model值（即编辑时的值，而不是data里的值）

2、推荐初始化方法

在script 中先行定义一个初始form的model值,要进行初始化时则将该值进行复制拷贝即可,这里进行示范

<!-- a.vue -->
<template>
  <div>
    <el-button @click="dialogVisible=true">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible" title="测试">
      <el-form label
最低0.47元/天 解锁文章
dantenou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用elementui的el-dialog弹出表单后resetFields()没有办法清空表单数据
lning8808的博客
08-10 1178
终于解决了使用elementui的表单时，编辑完某条数据后，再次添加新的数据时，使用.resetFields()方法表单里的数据没有清空 标签部分 <el-button type="primary" @click="add">新增</el-button> <el-button @click="edit">编辑</el-button> <el-dialog v-dialogDrag :visible.sync="form" > <el-fo
记录el-form+el-dialog表单重置问题
p_1024的博客
04-07 1221
element ui 表单无法重置问题
el-dialog设置高度、使用resetFields清除表单项无效问题
stay hungry, stay foolish
09-04 4404
可以将在弹窗关闭时将表单赋值为空，手动重置表单项。(2) 在el-dialog上自定义样式，使用。设置固定高度，或者限制最小的高度。包裹一个div，给它设置样式。(1)在el-dialog。
对于el-form的resetFields方法的作用理解
最新发布
qq_44741577的博客
05-24 427
官网的解释：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。
el-dialog 包裹的el-form ， resetFileds（）失效
hitower666的博客
10-31 420
如果你编辑时，第一次打开dialog的时候给表单绑定的model赋值了，这时候这个model的初始值就变成了你所赋值的值，所以resetFields的时候，会将model对应的每个值重置到初始值，这时候的初始值就是你编辑时赋值的那个值。但是关闭后，再点击新建角色 ，又是之前编辑的内容。所以：页面一进入， form表单就是原始的。点击编辑后，会一个个给form进行赋值，那么重置时，就会重置给给form赋值后的效果。根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。
el-dialog做新增和编辑关闭时重置表单数据并清除提示
Suk__的博客
04-10 1493
我们在做新增和编辑共用一个弹窗时,弹窗关闭后需要重置el-form的数据并清空提示,如果是先编辑关闭的,那么resetFields方法会把编辑的数据做为初始化的数据,所以在打开新增时就会看到数据状态并没有清空,校验提示也在,解决方法: onClose() { this.$refs.form.resetFields(); Object.assign(this.formData, this.$options.data().formData); }, 在el-dialog关闭的回调里
elmetui在关闭弹窗 使用 this.$refs[‘elForm‘].resetFields()方法重置表单不生效的原因及解决方法
Yhlhn的博客
06-25 633
当我们第一次打开Dialog，紧接着设置回显，因为Dialog还没执行完毕，这时form的初始值会被设置为回显的值，所以在调用this.$ref['form'] .resetFields()时form看起来没有重置。element-ui的官方文档：调用编辑的时候，表单的初始值被设置为回显的值，每次重置时只是重置为初始值，不是空值。解决：在form上添加ref，需要与this.$ref['form'] 中名称一致。解决：prop属性需要与data绑定的属性一致。1.表单上没有添加ref属性。
vue3 elform 在重新封装的弹窗el-dialog内无法resetFields
qq_36775019的博客
10-26 477
重新封装后 , 弹窗支持双向绑定 , 但是取消后resetFields失效了 , 上次校验结果还在 , 经过排查 , 应该为vue3 setup内钩子顺序问题 , 在resetFields之前 , dom已经销毁了 利用watch 和 nextTick 达到效果 watch( () => data.visible, (val) => { nextTick(() => { formRef.value?.resetFields()
element表单el-form的resetFields四种失效情况的解决方法汇总
Yunwushenyanying的博客
10-26 4732
本文汇总了el-form的resetFields方法失效的四种常见情景及其解决方法。
element ui 对话框el-dialog关闭事件详解
08-27
在 Element UI 中，`el-dialog` 是一个非常重要的组件，它用来创建对话框或者称为模态窗口，常用于显示警告、确认操作或者进行表单输入等场景。 `el-dialog` 的关闭事件是开发过程中经常会用到的功能，特别是在需要...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
总结起来，处理`el-dialog`初始化校验问题的关键在于正确管理`el-form`的状态和校验规则，确保在恰当的时机进行校验重置。通过合理使用Vue的生命周期钩子和事件监听，以及对`$refs`的适当判断，可以避免不必要的校验...
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑功能时，一个常见的挑战是如何在表单提交后清空数据，以便用户可以进行下一次操作，比如添加新...
elementui-清除弹框中表单的默认值-resetFields()
Misko的博客
11-01 7466
当弹框（dialog）中含有表单，要进行编辑、查看、新增操作，需要复用弹框，会涉及到清空表单数据。 elementui官网中dialog部分有这么一句话： Dialog 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，如果需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。 这里会遇到一个问题，先进行编辑再新增，使...
el-dialog（新增功能）弹窗关闭后重置表单数据
qq_44447607的博客
06-07 760
(最开始写代码的时候是写一个空的对象，数据和form保持一致，然后把对象赋值给form来达到置空的效果，人还是得多学习！
element-plus弹窗中el-form使用resetFields方法不生效
weixin_41586389的博客
08-01 1276
element-plus弹窗中使用el-form resetFields方法失效问题解决
新手上路~VUE3+Element-PLUS dialog弹出框重置表单不生效问题
Yjx的博客
02-03 1747
Element-plus dialog问题
vue3+element-plus表单重置resetFields方法不生效踩坑
热门推荐
YSQ_qsy的博客
08-05 1万+
vue3+element-plus表单重置resetFields方法有时不生效
el-form的resetFields()不起作用没效果
Anyuegogogo的博客
12-05 759
el-form的resetFields()不起作用没效果
el-dialog内嵌el-form
07-29
在 el-dialog 内嵌 el-form 的场景下，可以通过以下步骤来实现： 1. 在 el-dialog 的内容中添加 el-form 组件，例如： ```html <el-dialog> <el-form> <!-- 表单内容 --> </el-form> </el-dialog> ``` 2. 在 el-form 中添加需要的表单项，例如输入框、下拉框等。可以使用 el-form-item 包裹每个表单项，以便设置表单项的样式和校验规则，例如： ```html <el-dialog> <el-form> <el-form-item label="用户名"> <el-input></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password"></el-input> </el-form-item> </el-form> </el-dialog> ``` 3. 根据需要，在 el-dialog 中添加确定和取消按钮，以便提交或取消表单内容。可以使用 el-button 组件来创建按钮，例如： ```html <el-dialog> <el-form> <!-- 表单内容 --> </el-form> <span slot="footer"> <el-button>取消</el-button> <el-button type="primary">确定</el-button> </span> </el-dialog> ``` 这样，你就可以将 el-dialog 和 el-form 结合起来，在 el-dialog 内嵌 el-form，实现一个包含表单项的弹窗组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值