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. 【爬虫实战】——利用bs4和正则表达式,简单实现爬取数据

    前言 好久没有写博客了,由于一直比较忙,感觉快荒废了学习的步伐,最近由于需要利用爬虫爬取数据,总结一下,以便以后查阅. 目录 一.bs4的安装 二.bs4解析器 三.定位查找标签 四.转换格式 五.提 ...

  2. jenkins动态切换环境

    一.代码层实现动态切换 1.首先在conftest.py下声明pytest_addoption钩子函数,写法如下 def pytest_addoption(parser): # 设置要接收的命令行参数 ...

  3. C#项目—彩票选号

    C#彩票选号软件 今天做了一个彩票选号的小软件,将学到的知识点总结如下(新手小白,多提意见): 1.写程序的思路 实体类(属性.方法) No1. 随机数组集合(属性) No2. 创建集合对象(构造方法 ...

  4. python pyqt6 QMainWindow 使用QComboBox 窗口移位

    QMainWindow 可拖拽移动,但是点击QComboBox  时,窗口有时会误识别为拖拽移动,导致窗口自动移动位置 在QMainWindow中,新增事件筛选器 # 避免点击QComboBox时,窗 ...

  5. CSS & JS Effect – Tooltip

    介绍 Tooltip 长这样 它用 popup 的方式来详细描述一个主体. 比如某个 icon 代表着什么. 参考 YouTube – How To Make Tooltips With Only C ...

  6. Google – Reviews

    前言 继上一篇 Facebook – Reviews (Graph API) 后, 这篇继续介绍另一个 Reviews 大平台 Google Reviews. 想通过 API 获取 Google Re ...

  7. Vs Code, Visual Studio 2022, Angular and Live Server Running Through Https and IP Address

    前言 之前就写过 angular cli, vs code liveserver, vs 2019 iis express 10, vs code kestrel 使用 https + ip. 但写的 ...

  8. Java Web 拾遗

    许是年纪大了,老是回忆起以前的点点滴滴.翻看当初的代码,如同偶遇多年未见的前女友,曾经一起深入交流的情谊在颔首之间消散,令人烦躁. 今天就来聊聊老生常谈的 Java Web 开发.缘于一个简单的Spr ...

  9. Java远程连接服务器实现文件上传下载及目录操作

    详情请阅读原文 在其基础之上做了进一步的封装 <!-- https://mvnrepository.com/artifact/com.jcraft/jsch --> <depende ...

  10. 深入理解Android MTP之存储映射分析

    深入理解Android MTP之UsbService启动分析 分析了MTP的服务端的启动,本文来分析切换MTP模式后,存储中的数据(文件.目录)是如何映射到PC端的. 首先你得知道如何切换MTP模式. ...