1.问题

触发bug的条件是先打开,编辑进行赋值,后打开新增

先点开编辑

再打开新增

这个时候你会发现刚刚赋值过的数据还遗留在表单里面

即使在打开  dialog  的时候执行了重置也没有效果

resetForm(formName) {
if (this.dialogStatus === 'create') {
this.$nextTick(() => {
this.$refs[formName].resetFields()
})
}
},

2.关于resetFields()方法

  1. 此方法用于将form表单的数据设置为初始值
  2. 而这个初始值是在form mounted生命周期被赋值上去的
  3. 所以,在 form mounted之前,如果给form表单赋值了,那么后面调用resetFields()都是无效的,因为form表单的初始值已经在 mounted 之前就被赋值了

3.解决办法

所以我们要在 form 表单 mounted之后再进行赋值操作这样就可以完美解决问题了
在点击编辑赋值的时候使用 “this.$nextTick” 方法即可

handleEdit(row) {
this.dialogStatus = 'update'
this.dialogFormVisible = true
this.$nextTick(() => {
this.temp = Object.assign({}, row)
})
// this.temp = Object.assign({}, row)
},

element-ui resetFields 无效的问题的更多相关文章

  1. element ui 中的 resetFields() 报错'resetFields' of undefined

    每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...

  2. Element form表单方法resetFields无效

    之前遇到resetFields无效时都是自己手动用this.ruleForm = Object.assign({}, this.ruleForm, this.$options.data().ruleF ...

  3. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  4. 【Element UI】使用问题记录

    [Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...

  5. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  6. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  7. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  8. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  9. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  10. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

随机推荐

  1. layui的各模块的基本用途是什么?

    Layui 是一个流行的前端UI框架,提供了多个模块,每个模块有不同的功能和用途.以下是 Layui 的一些主要模块以及它们的基本用途: 核心模块(layui): Layui 的核心模块包含了一些核心 ...

  2. SpringMVC:文件上传和下载

    文件下载 ResponseEntity用于控制器方法的返回值类型,该控制器方法的返回值就是响应到浏览器的响应报文 使用ResponseEntity实现下载文件的功能 @RequestMapping(& ...

  3. 全网最适合入门的面向对象编程教程:45 Python 实现常见数据结构-链表、树、哈希表、图和堆

    全网最适合入门的面向对象编程教程:45 Python 实现常见数据结构-链表.树.哈希表.图和堆 摘要: 数据结构是计算机科学中的一种组织和存储数据的方式,它决定了数据的访问方式和操作效率,数据结构的 ...

  4. Java 集合工具包

    Java 集合工具包 Java集合是java提供的工具包,包含了常用的数据结构:集合.链表.队列.栈.数组.映射等. Java集合工具包位置是java.util.* Java集合主要可以划分为4个部分 ...

  5. 事件触发器TRIGGER

    我所理解的事件 MYSQL触发器 就好比是 JavaScript 中的 Object.defineProperty,通过观察某些行为,然后做些事情 创建触发器 DELIMITER $$ CREATE ...

  6. 中文关键字检索分析-导出到csv或者excel-多文件或文件夹-使用python和asyncio和pandas的dataframe

    1.02版本 把原来的tab一个个拼接成文件输出,改成pandas的dataframe 使用asyncio库来使用协程,但是测试下来速度好像是差不多的.可能速度太快了,没能很好的测出来差异. 原来的最 ...

  7. GANF: 用于多时间序列异常检测的图增广归一化流《GRAPH-AUGMENTED NORMALIZING FLOWS FOR ANOMALY DETECTION OF MULTIPLE TIME SERIES》(异常检测、多时间序列、DAG、贝叶斯网络、归一化流)

    今天是2022年7月12日,差不多小半个月没看论文了,因为模型一直运行不起来+系统搭建的一塌糊涂,今天干脆摆烂,本咸鱼要去看新的论文了(逃避旧工作,bushi). 对了,我们放暑假了,可是我没放暑假. ...

  8. uniCloud

    https://doc.dcloud.net.cn/uniCloud/ 什么是uniCloud uniCloud推出了opendb,包含了大量的开源数据库模板,常见数据表无需自己设计 uniCloud ...

  9. [TK] Terrible Prime

    题目链接 T415418 这道题严格的时间限制比较令人头疼,似乎需要一些高级的算法,但实际上是,想要用点基础知识通过这道题需要两种算法:费马小定理 (见下函数Miller_rabin) 用于subta ...

  10. [namespace hdk] string

    #include<bits/stdc++.h> using namespace std; namespace hdk{ const int siz=100001; class string ...