element-ui resetFields 无效的问题
1.问题
触发bug的条件是先打开,编辑进行赋值,后打开新增
先点开编辑

再打开新增

这个时候你会发现刚刚赋值过的数据还遗留在表单里面
即使在打开 dialog 的时候执行了重置也没有效果
resetForm(formName) {
if (this.dialogStatus === 'create') {
this.$nextTick(() => {
this.$refs[formName].resetFields()
})
}
},
2.关于resetFields()方法
- 此方法用于将form表单的数据设置为初始值
- 而这个初始值是在form mounted生命周期被赋值上去的
- 所以,在 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 无效的问题的更多相关文章
- element ui 中的 resetFields() 报错'resetFields' of undefined
每次做各种form表单时,首先要注意的是初始化,但是刚开始若没有仔细看文档,则会自己写个方法将数据设置为空,但是这样就会出现一个问题,表单内存在各种验证,假如是一个弹框内有form表单,弹框出现就执行 ...
- Element form表单方法resetFields无效
之前遇到resetFields无效时都是自己手动用this.ruleForm = Object.assign({}, this.ruleForm, this.$options.data().ruleF ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- 【Element UI】使用问题记录
[Element UI]使用问题记录 转载:https://www.cnblogs.com/yangchongxing/p/10750994.html 下载地址: https://unpkg.com/ ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——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/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
随机推荐
- python pyqt6 QComboBox 设定下拉框背景颜色
设定QComboBox 的背景颜色,边框设定,以及下拉框的背景颜色以及边框设定, selection-background-color 不生效可忽略 xxx_source = QComboBox(se ...
- 拼多多API出租,拼多多API租用,拼多多订单信息获取API,拼多多开放平台权限出租,拼多多开放平台API出租
当前,拼多多开放平台的审核还是比较严格的,虽然可以申请,但是难度很大,对于一些用户来说困难还是蛮大的 拼多多的API主要拼多多订单信息获取.拼多多商品上传,拼多多库存更新等 需要这块API的一般是需要 ...
- 【转】git常用操作
创建版本库 git clone url 克隆远程版本库 git init 初始化本地版本库 配置 git config --global user.name 'chengcp' 配置global级别的 ...
- 合合信息参编“生成式人工智能个人信息保护技术要求系列标准”,助力AI行业可信发展
生成式人工智能作为新一轮的技术革命成果,在赋能千行百业,给经济社会发展带来新机遇的同时,也产生了个人信息泄露.数据安全风险等问题.在此背景下,中国信息通信研究院(简称"中国信通院" ...
- QT硬件通讯基础
QT硬件通讯基础 使用AI技术辅助生成 1 QT与硬件通讯概述 1.1 QT硬件通讯的基本概念 1.1.1 QT硬件通讯的基本概念 QT硬件通讯的基本概念 QT硬件通讯的基本概念 QT作为一种跨平台的 ...
- kali系统安装和CVE-2017-12615测试
1 安装kali系统 1.1 下载VMware压缩包 kali-linux-2022.1 默认的用户和密码是kali 1.2 初始化系统 sudo apt update -y #kali sudo a ...
- 使用iis设置网站php版本为7.3
内容:使用iis设置网站php版本为7.3这张图 是多少人的噩梦 早期的宝塔版本 没办法在线升级, php版本只能到7.1 默认就没有7.2以上版本 怎么办?可以在iis设置第一步: 第二步 ...
- 线段树介绍(segment tree)
1.引入 给定一个区间\([1, n]\),希望你实现一种数据结构,支持以下操作: 1.修改\(i\)号节点的值. 2.询问区间\([i, j]\)中所有节点的和. 这不是树状数组板子 3.修改区间\ ...
- pcss 软阴影
PCF Percentage Closer Filtering:PCF是一种用于阴影反锯齿的方法,本身不是软阴影方法. 算法流程说明: Perform multiple (e.g. 7x7) dept ...
- iOS程序内语言切换使用小结
随着时代的发展,应用程序相继出现了不同语言的版本方案,中文,英文,法文,韩文等等:想在应用程序中实现语言的自由切换,需要配置多个语言的文件,根据用户的动态选择获取不同语言文件下的语言文件,从而显示到界 ...