【踩坑】之element-ui中form表单置空

最新推荐文章于 2023-03-16 14:13:36 发布
最新推荐文章于 2023-03-16 14:13:36 发布
阅读量1.2k 收藏 4
点赞数 6
分类专栏： vue 文章标签： 前端 vue.js
开心
本文链接：https://blog.csdn.net/weixin_45324044/article/details/126298288
版权

【踩坑】之element-ui中form表单置空


【踩坑】element-ui中的form表单置空
【需求】：点击新增的时候弹出一个form表单弹框，编辑或者复制的时候带有当前条数据
【现有问题】：先点击数据1编辑，再点击数据2编辑，再点击新增，会保留数据1的数据回显

data中定义的form表单是这样的

现有代码：（f发现form.resetFields()不太生效）
在这里插入图片描述
踩坑发现：重置表单就是回到初始值了 也就是我第一次点击编辑的时候回显的数据1
如果我先点的新增表单(空数据) 那之后重置表单一直都是正确的

两种解决办法：

1.保证form的初始值是空的，这样置空表单的时候就会回到空值，加个nextTick就可以了
在这里插入图片描述
2.表单置空的时候赋值data中最原始的定义值（$options.data()）
在这里插入图片描述

可可爱爱的你吖
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-element-nocode-admin:element-ui 的代码可视化编辑
05-06
Welcome to ele-cli :waving_hand: element-ui 的代码可视化编辑器，自动生成表单代码，列表代码。不是一个可视化解决方案，更像是生成模板的工具 :house: 网页版本，在preview分支 Install npm install -g ele-cli How to Use 服务端占用 3000 端口 ele ui 表单 一份表单有两个需要编辑的地方，一个是表单本身的属性，比如表单对象，表单的 Ref（用于表单验证），另一个就是表单包含的表单元素。 表单属性在表单属性编辑区可以编辑，表单元素的生成有两种方式 拖拽 将表单元素拖拽到拖拽区，然后编辑表单元素属性 支持 JSON 转化为表单 作为一个表单编辑工具，拖拽虽然简单，但是表单数量多的时候还是很麻烦。 因为我司接口通过 swagger 管理，其 post 接口列出了数据，如下图 你可以很方便的把数据粘贴至 JSON 表单对象的输入框，
详解element-ui中form验证杂记
01-19
最近接触的商户后台项目居多，自然而然就涉及到了大量的表单验证， 也就对一些常用的el-form表单验证和问题进行下梳理。 当我们添加required验证后，输入一些数据后再删除完时，会出现xxx is required，如下图所示 你可能很纳闷，已经为form表单传入了rules了啊，在不全部删除时，验证规则都没问题。这个问题是因为在html中使用了required字段，而在rules的规则没有设置required为true， // html <el label=角色名称 prop=roleName> <el-input v-model=
vue的form表单在提交成功后置空
myITliveAAA的博客
08-27 3449
vue的form表单在提交成功后置空 form表单 说明 ：form表单加上属性值 ref=“form” 点击事件加入 roleManager.$refs[‘form’].resetFields() (这里的roleManager指的是当前即this) ...
关于element-ui表单中限制输入纯数字的解决方式
10-14
主要介绍了关于element-ui表单中限制输入纯数字的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解element-ui中表单验证的三种方式
01-21
最近项目中一直使用的element-ui作为前端框架，对于最常使用的表单验证，做出以下总结： 第一种常用方式：表单上加rules｛object｝ <el class=apply-form model=formData rules=rule ref=form> <el label=姓名 prop=visitorName> <el v-model=formData.visitorName placeholder=请输入姓名></el> </el-fo
记录element-ui，form表单遇到的问题
wuxuan_的博客
07-25 1084
记录vue,element-ui表单校验及表单切换问题
vue中el-form resetFields()使用注意 （置空失效原因查找）
josiecici的博客
06-28 8386
重置操作注意事项 1.prop和model必填，ref必填： 示例： 重置代码： this.$refs[formName].resetFields(); 需要注意的是：(有时候置空不了的情况) 1.当el-form在v-if里面的时候，需要等v-if的dom加载好了才可以置空： 解决办法：这里就需要用到： this.$nextTick(()=>{ //在这里置空 }) 2.在dialog内，赋值了之后又清空的导致的失效，这里参考的别的大神的文章 赋值过后再清空，请点击移步 你编辑时，
element upload上传图标隐藏和修改回显图片
s212571231的博客
10-08 1896
element upload上传图标隐藏和修改回显图片。
vue+elementui上传图片&清空&回显
m0_69502730的博客
10-26 746
【代码】vue+elementui上传图片&清空&回显。
element-ui 的 el-input-number的默认值设置为空
且听风吟的博客
12-28 8670
element 的 el-input-number的默认值设置为空
Vue2.0+ElementUI实现表格翻页的实例
08-29
下面小编就为大家带来一篇Vue2.0+ElementUI实现表格翻页的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-plus vue3 dialog form 清空 重置 resetFields
zhengjf123的专栏
10-13 5362
添加、修改同一个弹框，清空form表单数据。 element-plus vue3 dialog form 清空 重置 resetFields
vue3+element-plus el-form表单组件二次封装（vue3+ts项目）TForm组件新增继承 Element-plus 组件的事件使用及el-input 去除前后空格
wocwin的博客
10-24 3433
vue3+element-plus el-form表单组件二次封装（vue3+ts项目） TForm组件新增了isHideItem属性动态显示隐藏某些项；TForm组件新增继承 Element-plus 组件的事件使用及el-input 去除前后空格（type=password 除外）
vue3用reactive定义的数据想要置空却置空不了的解决办法
weixin_46392674的博客
02-24 2734
el-button type="primary" @click="toSearch">查询返回//清空表单数据：如果定义的是reactive响应式的变量 需要打点出属性 单独清空 不能使用 resetFields();//清空表单数据：如果定义的是ref响应式的变量 使用 resetFields();//如果是搜索完之后必须再次调用查询的接口方法。清空时定义一个返回的按钮。
elementUI-plus的表单置空
bbt953的博客
06-15 346
如果获取dom节点时用的是 ，置空就会失效
Element UI 一键实现表单置空操作
m0_46109401的博客
08-08 615
Element UI 一键实现表单置空操作
element-ui 表单清空使用resetFields() 无效问题
weixin_48624392的博客
03-16 794
resetFields() 无效
报错： Error: Cannot find module ‘vue-template-compiler‘
热门推荐
可可爱爱的你吖的博客
12-14 1万+
报错： Error: Cannot find module ‘vue-template-compiler’ 最近听说公司要更换新技术vue3+ts+element，本来的后台都是用vue2.x+js+element来写的，所以就想自己先试一下但，但是没想到各种报错。。。。 新建Vue3+ts项目时，正常创建项目，如图： 但是回车后报错： 一脸懵逼，回头看了一下自己创建项目的步骤，是这样的，但是为啥会缺少了呢 去创建项目的文件下看了，创建的项目已经存在了，果断打开，在vsCode的终端中输入： npm
element-ui 中的form 表单介绍
最新发布
09-08
### 回答1： Element-UI 的 form 表单是一种基于Vue.js 的 UI 组件，它包含了一系列表单元素，允许你快速创建表单，并且支持表单验证。它还提供了一些特殊的表单元素，如日期选择器和文件上传等，可以帮助你构建出更加复杂的表单界面。 ### 回答2： Element-UI是一套基于Vue.js的桌面端组件库，其中form表单是其中一个常用的组件之一。Element-UI的form表单提供了方便易用的表单创建和验证工具，能够快速地创建出美观、灵活的表单界面。 Element-UI的form表单具有多种表单项类型，例如文本输入框、选择框、日期选择器等，能够满足各种不同类型的表单需求。同时，Element-UI还提供了规则验证机制，可以对表单进行必填项验证、长度验证等，保证用户输入的有效性。此外，Element-UI的form表单还支持表单布局的设置，可以通过配置参数实现单列、多列等不同的布局方式，适应不同的界面布局需求。 在使用Element-UI的form表单时，只需要在Vue.js的组件中引入form表单组件并进行配置，即可快速创建出一个完整的表单页面。开发者只需要设置表单项的类型和验证规则等参数，Element-UI会自动根据配置渲染出相应的表单界面，并对用户输入的内容进行验证。而且，Element-UI的form表单还支持表单响应式的设计，能够根据不同设备的宽度进行自适应调整，确保在不同分辨率的屏幕上都能正常显示。 总之，Element-UI中的form表单是一个功能强大、使用方便的组件，可以快速创建出各种类型的表单界面，并提供了灵活的验证机制和布局设置，帮助开发者提高开发效率。 ### 回答3： element-ui 中的 form 表单是一个用于收集和验证用户输入信息的组件。它提供了丰富的表单元素和验证规则，方便开发者进行表单的设计和数据校验。 首先，element-ui 的 form 表单可以用来创建各种表单元素，如输入框、下拉框、单选框、多选框等等。开发者可以根据需要选择合适的表单元素，并设置其属性、样式和事件。 其次，element-ui 的 form 表单支持数据校验，可以通过设定验证规则来确保用户输入的数据的有效性。验证规则可以是内置的常见规则，如必填、最大长度、最小值等，也可以是自定义的规则。当用户提交表单时，element-ui 会自动验证表单的字段，并对不符合规则的字段进行提示。 此外，element-ui 的 form 表单还提供了一些特殊功能。例如，可以自定义表单校验提示信息的样式和位置；可以配置表单的布局方式，如水平布局、垂直布局等；还可以设置表单的禁用状态，使其变为只读或不可编辑状态。 总的来说，element-ui 的 form 表单是一个强大且易用的表单组件，可以满足开发者在设计表单和实现数据校验时的需求。通过使用 form 表单，开发者可以减少开发时间和工作量，提高用户体验和数据的准确性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值