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
    评论
专栏目录
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() // 清空表单
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-UI清空表单及验证不生效的问题
HaiJaine的博客
05-03 2603
在使用Element-UI重置表单的方式时，一定要记住，表单中的prop属性不要漏掉。在查看方法使用时，并未提到prop这个属性，但继续往下阅读文档，就会发现，这个属性是必须的。注意prop属性值需要与model中的值一致。在这一句话中，需要与表单中的ref一致，且不能去其他的ref重名。
解决 element-ui 表单清空的问题：先编辑后新增 resetFields() 无效
来杯卡布奇诺的博客
12-07 2619
首先需要注意几个问题：1、页面有个新增和编辑共用的弹出框，在页面初始化后先点新增，后编辑，可以重置 form。 2、先编辑，后新增使用 resetFields() 表单数据没有清空。1、当我们先新增再编辑，初始值是空的，调用 resetFields() 方法自然正常。 2、当我们先编辑再新增，会对表单赋值，初始值就是我们赋的值，调用 resetFields() 方法，表单里还有之前赋的值，并不是我们希望得到的清空表单。在编辑时，弹出框中的表单我们先让他初始化结束再赋值，使用 $nextTick 执行赋值。代
1.基于Element-ui的表单重置操作
weixin_68978623的博客
09-30 3682
如下是基于element的表单重置操作
ElementUI清除表单 表单重置 防踩坑
qq_42430038的博客
04-24 2876
用了elementUI里的form表单，表单重置的几个关键点，我整理了一下，防止踩坑 1.表单刚开始的时候要绑定ref属性，不然在调用$refs时会找不到你传进来的表单名 2.el-form-item标签上绑定prop属性，prop属性的属性值就是对应表单里的参数名 <el-form ref="voucher" class="uploadVoucher" :model="voucher" label-width="120px"> <el-form-item label="订
elementUI弹窗关闭自动清空表单以及校验规则及不生效处理办法
最新发布
发渐稀的博客
08-30 2635
element组件中的Dialog 对话框，有时候会出现，第一次打开的时候校验没有问题，但是如果紧接着第二次打开弹框的时候，上一次的校验就会残留在本次打开的弹窗上。点击叉号那么就需要在叉号的回调函数中去清空本次的校验记录，而取消按钮更好做，直接写个函数指明取消即可。弹窗关闭一共就两种方式，第一种点击叉号，第二种点击取消按钮，那么就需要在这两个节骨眼上做文章；对于叉号而言，添加close事件，函数同取消按钮。
清空表单内容与初始化表单数据
Will_Season的博客
01-11 2212
在进行编辑的时候需要在打开form表单的时候对输入框赋值，那么赋值动作就是在created的时候进行的，这个初始值是在form表单created时确定的，如果在created的时候赋值了，resetFields()只是重置，重置为初始值。重置的是munted时候的值。解决办法：利用this.$nextTick()将赋值操作放到dom渲染结束之后。那么在以后的重置的时候都不会重置为空字符串。那么在以后重置的时候都不会重置为空字符串了。
elementui表格批量删除
weixin_35753431的博客
02-14 1678
Element UI 表格的批量删除功能可以通过以下步骤实现： 在表格的每一行添加一个复选框，用来选择要删除的行。 编写一个删除按钮，点击按钮时会删除选择的所有行。 在删除按钮的点击事件中，遍历表格中所有行，如果该行的复选框被选中，则将其从表格中删除。 最后，在数据源中更新删除的数据。 代码实现如下： <template> <el-table :data="tab...
记清空el-form表单
he_wenzi的博客
01-07 2281
由于表单弹框的编辑和新增用同一个，所以表单清空一直让我觉得很头痛，elementUI自己的表单清空方法resetField时而有用时而报错，逐项清空较为繁琐，在请教公司同事后，知道了一个新方法,非常好用哟 ```javascript this.shiftForm = this.$options.data().shiftForm // 置空表单，shiftForm是表单的数据对象 ...
编辑表格时弹窗里的el-form数据清空
huanhuan03的博客
09-29 486
el-form
form表单重置、清空方法记录
weixin_30508241的博客
10-26 7088
myform 是form的id属性值 1.调用reset（）方法 1 function fomrReset() 2 { 3 document.getElementById("myform").reset(); 4 } 2. 逐个清空input、select值 1 function resetAll() { 2 $("#myform").find('...
element-ui 表单清空 resetField()方法
热门推荐
weixin_41190571的博客
09-30 3万+
由于PM说项目赶时间，我二话不说撸起袖子就是一顿狂操作，自己操作了几遍没有发现bug当天下午就欣喜地将刚撸好的form表单功能提交给qa去测试。不一会儿qa就给我提一bug说：“你这表单操作有问题啊！为啥我重选前面的名称按钮，后面的类型选项会报错了？”。 如图所示： 我听完就连忙给她解释道：“这个不是bug，这个是提示信息而已嘛！”。QA又来了：“我看着那个红色提示就认为是错误的，用户...
Bug解决：ElementUI提交表单返回成功后自动清空表单的值
TuPonShuy的博客
07-29 2041
vue+elementui
Form表单元素清空 | Element元素清空 | JQuery清空表单元素
a879611951的博客
01-04 2176
function resetForm() { $(':input', '#page_form') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); }
vue输入框清空
陌子曦的专栏
07-16 2万+
&lt;el-input autofocus="autofocus" v-model="mseeage" placeholder="请输入内容" clearable @input="search" id="messageInput"&gt;&lt;/el-input&gt; 清空办法 Vue.nextTick(function(){ $("#messa
Vue、element-ui的resetFields()方法重置表单无效的问题
Queen-Shir的博客
08-21 1034
1、问题描述： element-ui的resetFields()方法重置表单无效。 2、原因： 参考：http://www.mamicode.com/info-detail-2949549.html 3、解决方案： 在用resetFields()重置表单之前，先把form表单里的值都重置。 ...
element-ui多层嵌套表格数据删除
weixin_34413802的博客
01-18 1458
很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方法,比较简单 实现思路: 把当前要移除的产品唯一值(id)与原始数据进行比较,找到当前选中的数据在原始数据中的位置,删除这一项,重新调用表格合并处理方法处理数据 注意事项: 一定要让后台返回一个可...
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、付费专栏及课程。

余额充值