vue+elementui(对话框中form表单的reset问题)

目录
  • 对话框中form表单的reset问题
    • 解决原理
    • 解决办法
  • element UI form表单重置无效
    • 实例化是
    • 说下解决

对话框中form表单的reset问题

一般在新增和编辑的时候用的都是同一个对话框和form表单，而在先点击编辑的时候form表单的resetfileds函数就会失效

解决原理

实际上结构是（通过vue类比）

  • data里面有一个form表单的初始值，
  • methods里面定义了一个resetfileds的函数
  • resetfileds函数的作用:记录在mounted生命周期执行之前最后一次form表单中对象的值,并且重新开启效验

在mounted周期中resetfileds函数会自动执行一次

实际运行：当第一次点开dialog的时候，form对象第一次被创建，dom加载，即自动运行一次resetfileds函数（此时已经记录了初始值）

在后面当再一次调用resetfileds函数的时候就会把函数中记录的对象值赋给form表单，所以如果是先点击编辑的情况下，form表单在点击新增时不会清空数据

解决办法

1：可以再新增时手动清除数据（缺点：此时resetfileds函数中记录的值并没有改变，还是当时第一次点击编辑的时候赋的值，但不影响使用）

2：第一次加载dom时如果要修改data中定义的form对象值，那么要将修改操作放在form表单dom元素加载完以后，即mounted生命周期之后（比较推荐的方式）

代码：第一次加载dom时如果要修改data中定义的form对象值，放在$nextTick中执行（即等待resetfileds函数执行以后再去把编辑或者新增的值赋值给form表单，这样子，resetfileds函数记录的就是form表单中data定义的初始化值）

element UI form表单重置无效

element 组件库里面重置有两个方法resetField和clearValidate，但是这两个方法，要用这两个方法肯定是要用ref实例化一个表单，用实例化的对象去重置表单，但是经常性的无效

实例化是

<el-form ref="operateForm" :model="form" :rules="rules">

使用方式经常是

this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()

说下解决

resetForm() {    //    注意：在这个方法中重置
      this.image = []
      this.form = {
        images: []
      }
    }

手动重置表单数据，然后用方法去重置规则状态

this.$refs['operateForm'] && this.$refs['operateForm'].clearValidate()    
//注意：在进到表单之前重置，我这边的话是弹框，我写在打开弹框的方法中的

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue之ElementUI Form表单校验

    Vue之ElementUI Form表单校验

    表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明. 以下是form的demo el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email"

  • vue+elementui 对话框取消 表单验证重置示例

    最近在写增删改查,在新增的时候要弹出对话框填写form表单信息,发现对话框右上角的小X和右下角的取消不是一个事件,我想在点击它们两个的时候都可以重置表单,最终解决,如下. vue: <el-dialog :title="titleName[dialogStatus]" :visible.sync="dialogFormVisible" @close="closeDialog" :close-on-click-modal="fals

  • ElementUI实现el-form表单重置功能按钮

    ElementUI实现el-form表单重置功能按钮

    目录 业务场景: 效果演示: 业务场景: 使用el-form时,点击重置按钮或者取消按钮时会实现表单重置效果. 重置功能按钮功能实现详细步骤: 第一:首先给el-form添加ref属性. <el-form :inline="true" :model="queryParams" ref="queryForm"> 第二:在点击重置按钮执行的方法中,执行如下功能代码片段 reset(){ # 重新设置请求参数实体属性 this.queryP

  • vue+ElementUI 关闭对话框清空验证,清除form表单的操作

    前面跟大家提到过 elementUI验证的问题,那么今天就来看看 点击对话框和关闭按钮 怎么清空验证,清空form表单,避免二次点击还会有 验证错误的提示 1.首先在你的对话框 取消按钮 加一个click事件,例如:(ps::callOf里面的addGroupData和ref一 一对应起来) <div slot="footer" class="dialog-footer"> <el-button @click="callOf('addGr

  • vue+elementui(对话框中form表单的reset问题)

    目录 对话框中form表单的reset问题 解决原理 解决办法 element UI form表单重置无效 实例化是 说下解决 对话框中form表单的reset问题 一般在新增和编辑的时候用的都是同一个对话框和form表单,而在先点击编辑的时候form表单的resetfileds函数就会失效 解决原理 实际上结构是(通过vue类比) data里面有一个form表单的初始值, methods里面定义了一个resetfileds的函数 resetfileds函数的作用:记录在mounted生命周期执

  • 仿ElementUI实现一个Form表单的实现代码

    使用组件就像流水线上的工人:设计组件就像设计流水线的人,设计好了给工人使用. 完整项目地址:仿 ElementtUI 实现一个 Form 表单 一. 目标 仿 ElementUI 实现一个简单的 Form 表单,主要实现以下四点: Form FormItem Input 表单验证 我们先看一下 ElementUI 中 Form 表单的基本用法 <el-form :model="ruleForm" :rules="rules" ref="loginFo

  • Vue+ElementUI怎么处理超大表单实例讲解

    最近公司由于业务的调整,之前的超长表单的逻辑改动较多,所以我就打算重构了(之前是一个已离职的后台写的,也没有注释,一个组件写了4000+行,实在有心无力).为了各位方便阅读,我这里把项目里拆分了14个组件进行了精简. 整体思路 大表单根据业务模块进行拆分 保存时使用el-form提供的validate方法进行校验(循环对每一个拆分的组件进行校验) mixin 对每个组件的公共提取(也利于后期项目的维护) 开始 这里以拆分2个组件为例:form1, form2(方便读者观看,命名勿喷) 这里两个组

  • 解决django中form表单设置action后无法回到原页面的问题

    django中form表单设置action后,点提交按钮是跳转到action页面的,比如设置action为login,网址为192.168.1.128,跳转后便会来到192.168.1.128/login,F5刷新也会是重新提交表单对话框,无法回到原页面. 因此就要在django服务器进行重定向,具体就是 from django.shortcuts import redirect #最后返回原页面 return redirect(url) 补充知识:Django + Ajax发送POST表单,并

  • vue+Element-ui实现登录注册表单

    本文实例为大家分享了vue+Element-ui实现登录注册表单的具体代码,供大家参考,具体内容如下 登录注册表单验证 通过Element-ui的表单实现登录注册的表单验证 效果图如下 注册 登录表单 登录的实现,需要通过手机号或者邮箱进行登录,验证手机号或者邮箱符合要求 // 登录表单验证的代码 // template的代码 <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

  • mvc中form表单提交的三种方式(推荐)

    第一种方式:submit 按钮 提交 <form action="MyDemand" method="post"> <span>关键字:</span> <input name="keywords" type="text" value="@keywords" /> <input type="submit" value="搜索&

  • JavaScript中Form表单技术汇总(推荐)

    JavaScript中Form表单技术汇总(推荐)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验证1-简单验证 进行简单的验证,用户名必须为abcd,密码长度必须大于等于6 然后根据用户输入的数据,在后面给出提示. 代码演示: <html> <head> <title>DHTML技术演示---表单验证</title> <meta http-equiv

  • 微信小程序中form 表单提交和取值实例详解

    微信小程序中form 表单提交和取值实例详解 我们知道,如果我们直接给 input 添加 bindinput,比如:<input bindinput="onUsernameInput" />,那么可以在 onUsernameInput 中直接使用 e.detail.value,即: onUsernameInput : function(e) { e.detail.value; } 但是,如果有多个输入控件,我们不可能为每个控件添加 bindinput.bindchange

  • react的ui库antd中form表单使用SelectTree反显问题及解决

    目录 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题,后来找到原因 react antd form表单回显踩坑 需求如下 总结 react ui库antd中form表单使用SelectTree反显问题 最近遇到这个问题,后来找到原因 1.formItem 需要使用initialValue赋值. 2.这个组件需要一开始就存在不能是条件渲染,非要用条件渲染需要让它先显示,然后根据条件让它不显示. 例子: state={  treeList:[],  sho

  • 解决Antd中Form表单的onChange事件中执行setFieldsValue不生效

    目录 Antd中Form表单的onChange事件中执行setFieldsValue不生效 原因是因为 解决方案 antd Design Form setFieldsValue的使用 解决 结束语 Antd中Form表单的onChange事件中执行setFieldsValue不生效 如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效. 原因是因为 Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手

随机推荐