element ui 新增和编辑公用组件表单 this.$refs.form.resetFields() 重置表单无效

已于 2024-05-13 16:14:54 修改
阅读量140 收藏
点赞数 4
文章标签： 前端
于 2024-05-13 16:13:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_60687276/article/details/138807014
版权

新增和编辑都在同一个表单页面，并且同一个dialog,this.$refs.form.resetFields()重置表单初始值，并不是清空表单的属性，表单第一次渲染的值是初始数据也，

1、表单回显给数据赋值时候写在this.$nextTick里面，

2、表单清空卸载关闭弹框之前或者同步 

this.$nextTick(()=>{

 this.$refs.form.clearValidate()

 this.$refs.form.resetFields()

})

.不尽人意
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
element ui dialog 表单点击编辑，再点击添加，数据无法清空问题 解决办法
xiawenyi1234的博客
08-07 4416
问题原因分析 vue element ui在做编辑和添加时候通常使用一个dialog 弹框，这样就会出现一个问题，点击编辑 再点击添加，这时候数据 已经赋值 了， 所以this.$refs[formName].resetFields()，无法把数据重置为空[] 这肯定不是我们想要的结果，后面是这样解决的，在点击添加按钮的时候 解决方式 element Ui新增表单的时候，表单默认数据是新增get_new_data,编辑的时候表单默认数据是get_edit_data,这两个数据只能填一个，根据当前状态（
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue+elment-ui实现编辑,详情,查看公用一个页面对话框 包括表单 删除详细代码
weixin_45856472的博客
06-12 2914
vue+elment-ui实现编辑,详情,查看公用一个页面对话框 包括表单 删除详细代码父组件:子组件: 我们使用了对话框加上父与子传值的方式实现,我们话不多说直接上代码 父组件: <template> <div> <el-card shadow="hover"> <el-row> <el-form ref="articleTitle" :model="articleTitle"> &lt
Element-Ui表单移除校验clearValidate和resetFields的区别
qq_35859392的博客
04-19 352
1、介绍 2、resetFields()与clearValidate()的区别 　　相同点：二者都能移除表单校验 　　不同点：resetFields()会对整个表单进行重置，将所有的字段重置为初始值 　　　　　　clearValidate() 只会移除表单校验，而且可以只对部分字段进行移除校验 3、resetFields()与clearValidate()的使用场景 　　resetFields...
清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果
weixin_44867717的博客
09-27 6486
清除ElementUI的el-input标签的校验——使用validate方法-区别之resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果 1、在el-form上方写属性 ref=“form” <el-form ref="form" :model="form" :rules="rules" label-width="90px"> 2、写清空代码，这里的form一定要和ref的值一致 this.$nextTick(() =>
【vue3+vue2】清除ElementUI的el-input标签的校验-区别——resetFields()-移除校验结果并重置字段值 & clearValidate()-移除校验结果
weixin_44867717的博客
09-07 6109
清除ElementUI的el-input标签的校验——resetFields()与clearValidate()的区别 1、在el-form上方写属性 ref=“form” <el-form ref="form" :model="form" :rules="rules" label-width="90px"> 2、写清空代码，这里的form一定要和ref的值一致 this.$nextTick(() => { // 表单数据置空 并且移除校验 this.$refs['form
VUE+Element-ui实战之新增弹出框和编辑弹出框共用一个组件
热门推荐
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
09-09 1万+
实战场景描述 我们在实际开发过程中，增删改查功能是最基础必不可少的，这里就少不了新增和编辑功能，通常都是点击按钮触发弹出框动作。 基本上新增和编辑的表单是一致的，只不过一个是空的，而另一个需要赋原始值。 因此抽出一个组件进行复用，会大大减小代码量。 首先学会点击按钮触发弹出框动作：VUE弹窗加载另一个VUE页面 1、el-table基本设置 ActivityManage.vue全部代码： <template> <div class="mycontainer"&g
elementui 新增和编辑使用同一个dialog
qq_41893334的博客
02-03 3354
项目中很多场景都有新增和编辑，使用一个dialog完成两个功能 新增和编辑分开写就上下面这样，写两个dialog <!--添加角色对话框--> <el-dialog title="添加角色" :visible.sync="addRoleDialogVisible" width="30%"> <el-form ref="form"
this.$toast() 了解一下？
12-03
在平时的开发过程中，我们总是先写好一个组件，然后在需要的页面中用 import 引入即可，但如果是下面这种类型的组件呢:backhand_index_pointing_down: 上面这种类型的浮层提示有一个很大的特点，就是使用频率特别高...
vue.js $refs和$emit 父子组件交互的方法
10-18
本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 381
记录一次前端页面崩溃的产生及处理
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 234
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
【JS实战案例汇总——不定时更新版】
微木
05-30 194
练习JS的实用案例
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 861
Web前端三大主流框架介绍：Angular、React、Vue
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 740
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
smileKH的博客
05-28 461
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
低代码开发与前端架构
最新发布
dsgdauigfs的博客
05-31 720
这篇文章将深入探讨低代码开发如何改变前端开发的方式，以及如何有效地将低代码工具与现代前端架构原则结合起来，以提高开发效率和应用质量。
this.$refs['form'].resetFields();
06-06
如果你使用的是`this.$refs['form'].resetFields()`方法重置Vue表单，这个方法通常是在使用了`element-ui`这个UI组件库的情况下使用的。`resetFields()`方法可以重置表单中的所有输入项，并将其设置为初始值。以下是一个示例： ``` <template> <el-form ref="myForm"> <!-- 表单元素 --> <el-button @click.prevent="resetForm">重置表单</el-button> </el-form> </template> <script> export default { methods: { resetForm() { // 通过$refs对象访问表单元素 this.$refs['myForm'].resetFields(); } } } </script> ``` 在上面的示例中，我们使用`ref`属性将表单元素命名为“myForm”，然后在Vue实例中使用`$refs`对象来访问该元素并调用`resetFields()`方法来重置表单。当用户单击“重置表单”按钮时，`resetForm()`方法将被调用，从而重置表单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值