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. mysql where 字符串根据英文逗号分割为数组 并判断是否包含指定字符串

    SELECT * FROM table_name where FIND_IN_SET('A',column_1) or FIND_IN_SET('B', column_2) table_name : ...

  2. php自定义函数访问其他地方定义的变量

    新捣鼓php,很多地方有.net的思维好难改过来. 在Connection/config.php 自定义了数据库连接字符串 然后在外部页面,自定义了一个function,对数据库进行操作 然后死活都给 ...

  3. 一次Java性能调优实践【代码+JVM 性能提升70%】

    这是我第一次对系统进行调优,涉及代码和JVM层面的调优.如果你能看到最后的话,或许会对你日常的开发有帮助,可以避免像我一样,犯一些低级别的错误.本次调优的代码是埋点系统中的报表分析功能,小公司,开发结 ...

  4. 这款PDF解析工具,精准触达大模型问答应用的需要

    过去的一年,是大语言模型快速发展的一年.大模型强大的语言理解能力,逐渐让用户习惯了将各类文章丢给大模型,让它来帮忙总结提炼.从产品角度看,这是一次10倍体验的飞跃,意味着巨大的市场机会.也因此,市面上 ...

  5. Angular Material 18+ 高级教程 – 大杂烩

    前言 本篇记入一些 Angular Material 的小东西. Override Material Icon Button Size 参考:Stack Overflow – Change size ...

  6. JavaScript – ES6-ES2023 大杂烩

    前言 一年半没有写 JS 了, 今天开始来个大复习, 顺便把这么多年零零散散的知识点做成笔记. 练练字. ES 3, 5, 6, 2017, 2018... ES 6 等于 ES2015 ES 7 等 ...

  7. react-pdf预览在线PDF的使用

    1.在react项目中安装react-pdf依赖包 建议安装8.0.2版本的react-pdf,如果安装更高版本的可能出现一些浏览器的兼容性问题: npm install react-pdf@8.0. ...

  8. VS(visual studio) C++ 封装dll,以及其隐式调用与显式调用(静态\动态)

    DLL介绍 DLL(动态链接库,Dynamic Link Library)是一种可执行文件,它包含可以在其他程序中调用的函数和数据.他是Windows操作系统中的一个重要概念,用于代码共享和模块化. ...

  9. Python 项目配置管理框架技术选型

    一.背景介绍 在实际生产项目中,不同环境(如开发.测试.生产环境)常有不同配置需求,如数据库链接等.我们期望一份代码无需改动,仅通过单一配置变量调整就能适配和使用多个环境,实现 "一份代码, ...

  10. 普元中间件Primeton AppServer6.5安装(Windows)

    本文在Windows环境下安装普元中间件Primeton AppServer6.5(以下简称PAS) 一.安装前准备 1.1使用软件版本 Primeton_AppServer_6.5_Enterpri ...