关于element-ui中表单重置不生效的原因,及解决方法

这篇具有很好参考价值的文章主要介绍了关于element-ui中表单重置不生效的原因,及解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

element表单重置无效,vue-学习笔记,javascript,elementui,vue

resetFields这个方法是将表单重置为初始值, 也就是说,是将表单中的数据重置为dom节点渲染时的值,而不是重置为空对象。

也就是说,当你的表单数据,是在dom节点渲染前被赋值的,那么他的初始值就不为空了。

还有就是vue中对象是不能直接赋值给另一个对象的

解决方法:给表单对象赋值,应在dom节点渲染完成之后,使用$nextTick这个方法,以及对

赋值的数据进行转义

$nextTick:将vuedom节点更新变为同步

//this.form:是表单对象
//data:是值
 this.$nextTick(()=>{
     this.form = JSON.perse(JSON.stringify(data))
  })

使用resetFields的注意事项:设置prop属性,该属性值要与model值相同,如果不设置这个属性,

resetFields是不生效的

element表单重置无效,vue-学习笔记,javascript,elementui,vue文章来源地址https://www.toymoban.com/news/detail-539957.html

到了这里,关于关于element-ui中表单重置不生效的原因,及解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 1.基于Element-ui的表单重置操作

     1.如下是基于element的表单重置操作 1.创建输入框 2.创建一个重置按钮 3.输入框的数据进行ref绑定 4.给按钮绑定点击事件,调出实列对象进行重置 2.解析方法:  1.ref=\\\"loginref\\\" 拿到整个表单的实例对象,可以进行重置 2. @click=\\\"resetlogin\\\" 绑定点击事件,拿到$refs实例对象进行重置

    2024年02月11日
    浏览(53)
  • 解决 element-ui 中From 表单和Dialog 对话框搭配使用时 resetFields重置方法无法清空数据的问题

    在实际开发实现表格的增删改查的时候,新增和修改通常共用一个弹窗以节省代码量  当我们先点击修改的时候,会对弹窗表单进行赋值,这个时候我们再点击新增,会发现刚刚的表单数据仍然躺在表单中,并且使用resetFields没有清除数据 其实resetFields()是生效了的,resetFie

    2024年02月16日
    浏览(53)
  • element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(46)
  • 关于Element-UI el-select多选表单校验问题

       在使用 el-select 多选下拉菜单配置表单校验时, 如果form表单绑定的form对象对应属性值为空字符串或者null(其他未尝试),表单中的多选下拉框会立刻执行校验并弹出校验信息,代码如下: 正确方式如下: 将多选下拉框对应的属性值默认值设置未空数组即可

    2024年02月11日
    浏览(54)
  • vue element ui From表单校验不生效问题解决

    解决方案① el-from 上要使用 :model 不要使用 v-model 解决方案② el-from-item 上是否有加 prop ,并确定 prop 是不是和编写的规则相同 解决方案③ $refs[formName] 与 $refs.formName 注意事项 前者提交的时候要传参 @click=\\\"submitForm(\\\'ruleForm\\\')\\\" 不然不生效 解决方案④网上有人说 未在 data 里面声

    2024年02月11日
    浏览(38)
  • Vue3+Element Plus 关于Dialog弹出Form表单,使用resetFields重置无效的解决

    主要参考了element-plus官方的表单重置按钮(官方Form例子任意reset按钮),然后试了试他的ref绑定,发现可以完美解决重置问题。 第一步:给Form表单绑定ref。绑定ref 的值为refFormInstance();这里注意表单el-form-item必须有prop属性。 2.第二步:在你想要重置的地方调用重置表单方法

    2024年01月21日
    浏览(48)
  • 【前端】解决element-ui的form组件resetFields()方法不生效的问题

    使用 element-ui 的 form 组件,在输入栏较多的时候,有时 resetFields 只能重置一部分输入框的值 给每个值赋值初始值为空即可 例如,需要清除的 :model=\\\"queryForm.bgnTime\\\" 、 :model=\\\"queryForm.endTime\\\" 等一系列的值,那么就不要只定义 queryForm:{} ,而是要把对象下的各个属性赋值初值为空

    2024年02月15日
    浏览(54)
  • 解决 element-ui 表单清空的问题:先编辑后新增 resetFields() 无效

    首先需要注意几个问题: 我们需要为每个 form-item 加上 prop 属性,要不然无法清空(大部分的问题就是出在这) resetFields() 方法是重置表单,重置为初始值,而不是设置为空值 在 resetFields() 方法之前,如果修改了 data 里的表单默认值,那么重置以后就是你修改以后的值,而不

    2024年02月13日
    浏览(55)
  • element-ui form表单,select多选时,初始自动校验问题解决

    使用 el-select 多选框配置表单校验时, 如果绑定值为空字符串,表单中的多选下拉框会自动执行校验并提示红色文字提示,体验非常不好; 原因:form表单-value1默认为空字符串 改为空数组即可解决

    2024年02月13日
    浏览(40)
  • 解决element-ui表单禁用状态时,其表单中包含的组件或其他元素不被禁用

    解决element-ui表单禁用状态时,其表单中包含的组件或其他元素不被禁用 (1)例子 (2)zujian.vue(要使自定义组件其外层表单的影响。可以在组件内部加上新的el-form解决)

    2024年02月13日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包