ElementUI-表单清空问题

已于 2024-07-11 16:22:36 修改
阅读量1.1k 收藏 1
点赞数 1
分类专栏： # UI库 文章标签： elementui 前端
于 2023-03-14 16:40:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45734001/article/details/129531269
版权

数据回显异常

  • 问题描述：设置输入框初始值为1，调用表单清空方法后，输入框初始值1丢失
  • 出现原因： v-if会造成el-form-item的重新挂载，从而导致this.$refs.form.resetFields()后返回的默认值不是预期中的值
  • 解决方法：使用v-show代替v-if

表单校验方法会校验未显示元素

  • 问题描述：绑定类型为邮箱时，校验了手机号是否正确，此时手机号输入框为隐藏状态
  • 出现原因：使用v-show时，表单元素及校验规则任然存在
  • 解决方法
    • 使用自定义校验规则，在规则外面裹一层v-show的判断条件（缺点：简单校验是否为空的数据也需要通过自定义校验规则）
    • 通过类型实时变更表单绑定的规则（缺点：表单绑定的校验条件变化时都会自动校验一次，需要手动清除一次校验结果）

表单数据清空方法resetFields失效

  • 问题描述：编辑后关闭弹窗，再点击新增时，弹窗回显编辑记录的数据
  • 出现原因
    • el-form-item挂载时，prop对应的model里的值为此表单项的初始值
    • 编辑时在挂载前设置了表单绑定的数据，所以清空失效
  • 解决方法
    • 使用$nextTick在表单挂载后再设置表单绑定的数据的值

清空表单部分失败

  • 问题描述：清空表单后，即时配送选项绑定的数据没有恢复至初始态
    • 初始状态初始状态
    • 输入后
      在这里插入图片描述
    • 重置后
      在这里插入图片描述
  • 出现原因：活动区域下拉列表和即时配送开关位于同一个el-form-item中，此el-form-item绑定的prop为下拉列表的绑定值，所以重置了活动区域，未重置即时配送
  • 解决方法：每一个表单项都用一个el-form-item进行包裹
cookie-y
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
最新版ElementUI-web-Axure组件库
03-12
2. **页面模版**：预设的页面模板可以帮助设计师快速搭建常见的页面布局，如导航栏、侧边栏、表单等，节约设计时间。 3. **统计图**：统计图组件包括饼图、柱状图、折线图等多种图表，可用于展示数据和分析结果，...
el-element表单el-form使用resetFields清空进行初始化
migexiaoliang的博客
12-07 2686
el-element表单el-form使用resetFields清空进行初始化 我们一般使用带表单的弹窗时，有时候新建完成再次打开或者填写完数据不保存去关闭表单，再次打开会保留之前的填写。 想要点击取消按钮、点击关闭按钮清空数据，可以使用element的 1、el-form 里 加上 ref=‘form’；2、表单项 加上 prop=“name”；3、this.$refs[‘form’].resetFields() // 清空表单
elementUI清空弹框中的表单数据
热门推荐
Start2019
08-27 1万+
表单提交后，发现表单中的数据没有清空。两种实现方法...
el-form清除表单信息
star的博客
03-02 1万+
当注册时输入的用户名已存在，清空之前输入的注册信息： 不清空表单的效果： 清空表单信息之后的效果： 可使用resetFields方法或者clearValidate方法 resetFields方法：可移除校验结果并重置字段值（注：清除表单项name的校验及数值） clearValidate方法：只能移除校验结果，不能重置字段值（注：只清除表单项name的校验，不清除表单项name的数值） &...
element ui 清空表单数据示例
小志的博客
02-24 6451
1、举例组件代码 <el-form ref="searchForm" :inline="true" :model="form" label-width="80px"> <!--prop属性添加到form-item上,需要和绑定数据的最后名称一致--> <el-form-item label="名称:" prop="name"> <el-input v-model="form.name" placeholder="请输入内容">
清空Element表单的整个数据
文龙刚的博客
02-15 1761
【代码】清空Element表单的整个数据。
Vue el-form 表单清空 初始化
u012174809的专栏
12-21 4538
如果用手写属性值=undefined 会带来副作用影响，比如下次打开，这个属性没了，然后页面无法写入，或是选择项出现validate校验error ，这并不是我们想要的效果，推荐 使用官方已经定义好的 resetFields 它需要具备三个条件，才能成功初始化。 1.el-form 里 加上 ref='form' 2.表单项 加上 prop="name" 3.this.$refs['form'].resetFields() // 清空表单 ...
ElementUI-Form表单二次封装
06-01
ElementUI-Form表单二次封装
基于elementui-vue的后台管理系统代码
05-26
在"vue-elementui后台管理系统代码"中，我们可以找到一个基于 Vue.js 和 ElementUI 构建的后台管理系统的源码。这个名为 "vue_shop-master" 的项目很可能是一个电商后台管理系统的实例，包含了创建、维护和管理商品...
elementUI-最新版离线文档
04-22
1. **组件丰富**：ElementUI 提供了诸如按钮、表单、表格、对话框、通知、布局、导航等大量常见 UI 元素，覆盖了网页设计中的大部分需求，可以快速搭建出美观的界面。 2. **响应式设计**：所有组件都遵循响应式设计...
elementUI-最新版离线文档-2.15.6.zip
12-31
ElementUI 是一个基于 Vue.js 的开源前端组件库，它提供了丰富的 UI 组件，用于快速构建现代化的 Web 应用程序。这个"elementUI-最新版离线文档-2.15.6.zip"压缩包包含了 ElementUI 的 2.15.6 版本的离线文档，方便...
elementUI清空表单校验及清空表单内容信息
qq_63026743的博客
12-21 2206
通过调用对整个表单进行重置，将所有字段值重置为初始值并移除校验结果调用移除表单项的校验结果。
vue element ui 表单 提交数据后清空数据
最新发布
qq_21810059的博客
01-29 1142
在Element UI中，可以使用this.$refs.formName.resetFields()来清空表单的验证。elementui清空表单验证。
【vue+elementUI】校验el-form输入的内容是否符合规则+关闭页面清空el-form+关闭弹窗时清空表格所有勾选项+动态显示勾选条数
qq_44804622的博客
10-18 2271
3.页面添加一个保存按钮，绑定save()方法对验证的数据进行处理。label-position 表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width。给想要清空搜索项的el-form绑定一个ref，然后使用this.$refs.XXX.resetFields()即可。model 表单域model字段，在使用 validate、resetFields 方法的情况下，该属性是必填的。resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果。
elementui中的新增弹窗在新增成功后如何快速清空所有表单数据
m0_50441807的博客
05-13 3508
在实际开发中，新增弹窗的form表单中输入内容后，新增成功后应该把form表单清空，不然下次再进入新增弹窗时，会有上次新增完的内容： form表单项少的话可以选择手动删除： save() { // 保存成功后，清空form表单数据 this.form = { name:'', age:'', pass:'' } } 以上的方法当然也是可以的，但是如果form表单有很多项的话，你需要写很多清空代码； elementui中的form提供resetFields方法，用于清空所有表单数据，前提是
解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效
来杯卡布奇诺的博客
12-07 2620
首先需要注意几个问题：1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，可以重置 form。 2、先编辑，后新增使用 resetFields() 表单数据没有清空。1、当我们先新增再编辑，初始值是空的，调用 resetFields() 方法自然正常。 2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用 resetFields() 方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。在编辑时，弹出框中的表单我们先让他初始化结束再赋值，使用 $nextTick 执行赋值。代
element-ui自带清除表单方法
weixin_45799371的博客
09-04 1198
element-ui表单重置方法注意事项
清空el-form表单数据（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-26 3261
<!-- 添加险种开始 --> <el-dialog destroy-on-close title="添加业务事项" :visible.sync="mattersShow" class="add-video-dialog mattersBox" width="45%"> <el-form :model="mattersForm" ref="mattersForm" label-width="8vw"> <el-form-item label=
解决Element-UI清空表单及验证不生效的问题
HaiJaine的博客
05-03 2603
在使用Element-UI重置表单的方式时，一定要记住，表单中的prop属性不要漏掉。在查看方法使用时，并未提到prop这个属性，但继续往下阅读文档，就会发现，这个属性是必须的。注意prop属性值需要与model中的值一致。在这一句话中，需要与表单中的ref一致，且不能去其他的ref重名。
elementui中表单验证清空
07-28
在 Element UI 中，可以使用 `this.$refs.form.resetFields()` 方法来清空表单验证。这个方法会将表单中的验证状态和错误信息都重置为空，让表单恢复到初始状态。你只需要在需要清空表单的地方调用这个方法即可。 以下是一个示例代码： ```html <template> <el-form ref="form" :model="formData" :rules="formRules"> <!-- 表单项 --> </el-form> <el-button @click="resetForm">清空表单</el-button> </template> <script> export default { data() { return { formData: { // 表单数据 }, formRules: { // 表单验证规则 } }; }, methods: { resetForm() { this.$refs.form.resetFields(); } } }; </script> ``` 在上面的代码中，`resetForm` 方法会调用 `this.$refs.form.resetFields()` 来清空表单验证。你可以将这段代码放在你需要的地方，比如点击按钮时触发清空操作。 请注意，`this.$refs.form` 是使用 `ref` 属性给表单组件指定的引用名称，你需要根据实际情况修改为你自己的引用名称。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值