Vue+Element-ui表单resetFields无法重置问题

目录
  • 问题背景
  • 第一个无法解决重置表单解决方案
  • 第二个无法解决重置表单解决方案

问题背景

在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种：

1、<Modal/ >组件内表单填写，在 modal 组件未挂载在 DOM 元素中，就无法获取到 form 表单组件的实例，所以this.$refs[formName]获取实例就会出现 undefined 的情况。

2、比如编辑表格数据，需要回显表单数据，我们一般的做法就是放表单的 rawValue 赋值就搞定，但是我们从新添加数据之前想重置表单就无效。

下面说说我遇到上面两种无法重置表单问题的解决方案：

第一个无法解决重置表单解决方案

判断不是undefined的情况下才会去调用 resetFields 方法：

if (this.$refs["form"] !== undefined) {
  this.$refs["form"].resetFields();
}

第二个无法解决重置表单解决方案

回显填充表单数据逻辑写在nextTick函数的callback中,nextTick原理大家可自行搜索就有，不多说。

Vue2.x

fillFormData(rawValue) {
  this.$nextTick(() => {
    for (let key in this.form) {
      if (rawValue[key]) {
        this.form[key] = rawValue[key];
      }
    }
  });
},

Vue3.x

import { nextTick } from 'vue';

const fillFormData = () => {
    nextTick(()=>{
      // 数据回显逻辑
    })
}

这样，在添加新的数据之前，再调用一下重置表单resetFields()就可以了。

到此这篇关于Vue+Element-ui表单resetFields无法重置问题的文章就介绍到这了,更多相关Vue Element表单resetFields无法重置内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

    问题: 使用this.$ref['form'] .resetFields()无法重置表单项 原因: 1.没有给表单添加ref属性 <el-form ref="form"></el-form> 2.表单项el-form-item没有添加prop属性,prop属性需要与input框绑定的属性一致 <el-form ref="form" :model="sizeForm" label-width="80px&qu

  • 解决vue+ element ui 表单验证有值但验证失败问题

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" > <el-col :span="20"> <el-input type="textarea" v-model="form.template

  • Vue系列之Element UI表单自定义校验规则

    目录 一.表单效验规则的使用 1.自定义效验规则介绍 2.绑定效验方法 3.添加效验 4.效验判断 5.清除效验规则 二.常见表单效验规则 (一)pattern验证 (二)validator.js文件中常见的验证方法 总结 一.表单效验规则的使用 1.自定义效验规则介绍 是否必填: required: true  ||   fasle 效验消息提示:message: "提示信息" 效验触发方式:trigger:"change"  ||  "blur&quo

  • Vue+Element-ui表单resetFields无法重置问题

    目录 问题背景 第一个无法解决重置表单解决方案 第二个无法解决重置表单解决方案 问题背景 在开发中自己使用this.$refs[formName].resetFields()出现无法重置表单的的场景有两种: 1.<Modal/ >组件内表单填写,在 modal 组件未挂载在 DOM 元素中,就无法获取到 form 表单组件的实例,所以this.$refs[formName]获取实例就会出现 undefined 的情况. 2.比如编辑表格数据,需要回显表单数据,我们一般的做法就是放表单的 raw

  • vue+element实现表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分为以下4布: 1.在el-form标签中定义:rules="rules";ref="reference" 2.在el-form-item定义prop="name"; 3.在选项data中定义rules校验规则; 4.在提交方法中检查用户行为 templa

  • vue3.0中使用element UI表单遍历校验问题解决

    vue3.0中使用element UI表单遍历校验问题解决

    问题 在使用vue3.0写项目的时候遇到一个需要遍历的表单,可以增加删除表单对象 不考虑校验问题的话,就是简单的数组包form对象.涉及校验的时候,按照以往的写法就是绑定ref值,然后调用组件的validate方法[form表单中配置rule规则]. 解决方法就是将数组内嵌在一个对象中,对象的结构跟我们定义的form对象结构一致 //我们需要遍历的form对象数组 const arr = [ { name:'', sex:'', age:'', },{ name:'', sex:'', age:

  • Vue2中Element UI表单的使用详解

    Vue2中Element UI表单的使用详解

    目录 引入ElementUI 表单中组件数据的获取 表单中的修饰符 实例 自定义指令 全局指令directive 不带参inserted 带参bind 局部指令directives 总结 引入Element UI <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --

  • vue element自定义表单验证请求后端接口验证

    做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. template <el-form-item label="账户" prop="userid"> <el-input v-model="addForm.userid"></el-input> </el-form-item> 引入接口 import { checkUseridRepeat } fro

  • vue element ui validate 主动触发错误提示操作

    elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下: this.$refs['form'].fields[0].validateMessage = 'error message' this.$refs['form'].fields[0].validateState = 'error' 补充知识:element-ui 打开页面触发校验问题 如果你设置了关闭弹出页就resetFields

  • Vue + Element UI 实现权限管理系统之菜单功能实现代码

    Vue + Element UI 实现权限管理系统之菜单功能实现代码

    目录 菜单功能实现 菜单接口封装 菜单管理界面 测试效果 源码下载 菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', m

  • vue+elementUI实现表单和图片上传及验证功能示例

    vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

随机推荐