【积累】Element-ui,el-dialog里面嵌入el-form,resetFields失效问题

2023-11-19

记一次element-ui,el-dialog里面嵌入el-form,使用resetFields方法初始化表单失效,问题记录:

前提:

当el-form在一个el-dialog中,dialog显示与否绑定变量 showDialog,ref 为 editForm_ref ,e-lform的model绑定了一个对象editForm,初始值为:

	editForm:{
	    unitName:'',// 单位名称
	    parentUnitName:'',// 父级单位名称
	    unitLevel:'',// 科目级别
	},
操作步骤:
  1. 点击页面按钮,给form 的 model 赋值:

    	// 对 editForm 赋值
        this.editForm = {
        	unitName:'单位名称',// 单位名称
    	    parentUnitName:'父级单位名称',// 父级单位名称
    	    unitLevel:'科目级别',// 科目级别
        };
    	// 使dialog显示出来
    	this.showDialog = true;
    
  2. 此时点击按钮,调用方法:

    	this.$refs.editForm_ref && this.$refs.editForm_ref.resetFields();
    	
    	// (tips:需求为 -> 重置成vue.data里的初始值)
    
出现的问题:

按照原有想法,应该是想让嵌套在dialog里面的form进行初始化,数据应该如下:

	editForm:{
      unitName:'',// 单位名称
      parentUnitName:'',// 父级单位名称
      unitLevel:'',// 科目级别
	},

但是,debugger发现,resetFields方法里面,每一列的fileld的初始值为 步骤1赋值之后的值,即from的初始值发生了变化~~

解决方法:
	// 上述步骤1改为:
	
	// 使dialog显示出来
	this.showDialog = true;
	// 对 editForm 赋值
    this.$next(_ => {
		this.editForm = {
	    	unitName:'单位名称',// 单位名称
		    parentUnitName:'父级单位名称',// 父级单位名称
		    unitLevel:'科目级别',// 科目级别
	    };
	});
猜想:

form如果嵌入dialog中,form的初始化,是dialog第一次显示的时候,form model的初始值,并且form初始化会有一定时间延迟。

结果:

页面检查元素,发现,el-dialog的body元素,的确是在第一次显示之后,才会渲染,也就意味着内嵌的el-form在这时才会真正渲染,步骤1,在el-form渲染之前,改变了绑定的model值,所以el-form的model初始值,与vue.data里的初始值,是不一样的,导致resetFields方法未能达到想要的结果

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【积累】Element-ui,el-dialog里面嵌入el-form,resetFields失效问题 的相关文章

  • 一文搞懂积分不等式证明(积分证明题总结笔记3/3)

    积分证明题是考研中难度较大的板块 很多学弟学妹们希望我出一篇总结文章 故作本文 希望对大家有所帮助 本文所涉及题目 均是来自市面上常见题册 李林880 张宇1000题 汤家凤1800等 由于内容较多 故分为三部分 等式证明 点击进入 由积分
  • Qt 绘图设备,QPixmap 和QImage 相互转化

    Qt的绘图系统允许使用相同的API在屏幕和其他打印设备上进行绘制 整个绘图系统基于 QPainter QPainterDevice 和 QPaintEngine三个类 QPainter用来执行绘制的操作 QPaintDevice是一个二维空
  • ospf和mgre的综合应用

    1 R6为ISP只能配置IP地址 R1 R5的环回为私有网段 首先划分好IP地址 如下图所示 然后对各个环回和接口进行IP配置 如下面所示 对r1 r1 int l0 r1 LoopBack0 ip add 192 168 1 1 24 r

随机推荐

  • Mybatis-plus查看完整执行sql

    Mybatis plus查看完整执行sql application properties 文件 mybatis plus configuration log impl org apache ibatis logging stdout Std
  • Redis-Sentinel(哨兵模式),看这篇就够了哦

    文章目录 简介 启动并初始化Sentinel 初始化Sentinel服务器 替换普通Redis代码为Sentinel的专用代码 初始化 Sentinel 状态 初始化Sentinel监视的主服务器列表 创建连向主服务器的网络连接 获取主服务
  • 二进制兼容与Qt的D指针

    二进制兼容的定义 一个连接到旧版本的动态库的应用程序 无需重新编译就可以用新版本的动态库运行 则这个库被认为是二进制兼容的 一个连接到旧版本的动态库的应用程序 无需修改源码单需要重新编译后可以用新版本的动态库运行 则这个库被认为是源码兼容的
  • java版spring cloud+spring boot 直播电商 社交电子商务平台

    涉及平台 平台管理 包含自营店面 商家端 PC端 手机端 买家平台 PC端 H5 公众号 小程序 APP端 IOS Android 微服务 核心思想 分布式 微服务 云架构 模块化 原子化 持续集成 集群部署 开发模式 代码生成工具 驱动式
  • 【Java 数据结构】单链表与OJ题

    篮球哥温馨提示 编程的同时不要忘记锻炼哦 暮色降临 冲一杯咖啡 目录 1 什么是链表 2 实现一个单向非循环链表 2 1 实现前的约定 2 2 addFirst 方法 2 3 addList 方法 2 4 addIndex 方法 2 5 c
  • SpringBoot 集成积木报表

    前言 积木报表是jeecg的一款开源但代码不开源的一款自定义报表 可以基于 网页灵活调整报表的布局 样式等内容 无需编程 专为企业数据分析 报表制作而设计 降低管理人员汇总制作报表的门槛 解决各类日常管理和 汇报的难题 但是因为代码不开源所
  • SQL 入门的必读好书

    点击蓝色 有关SQL 关注我哟 加个 星标 天天与10000人一起快乐成长 最近 很多朋友来问我 有没有入门 SQL 的好书 与这些朋友聊天发现 大部分人都没有系统学过计算机专业的专修课 有从物流转行的 有从会计专业扩展的 还有从运维行业转
  • 出现“java.sql.SQLException: 无法转换为内部表示”解决方法

    现在 java sql SQLException 无法转换为内部表示 很可能是因为数据库某字段的类型出错了 比如程序将某字段当做Integer类型 而数据库存储又使用另外一种类型 不如String 建议出现这样问题的同行们认真检查一下代码
  • 软件配置管理

    第一章 1 软件配置管理用于控制变化 2 软件配置管理 Software Configuration Management SCM 是指一套管理软件开发和维护过程中所产生的各种中间软件产品的方法和规则 它是控制软件系统演变的学科 3 软件配
  • java8之lambda表达式

    java8 近期 在一个不完全的统计中 java8的普及率已经到达了近80 图 1 相比之前的java版本 下面两个是java8出现带来最大的影响 其一是极大地简化了代码的复杂度尤其是在处理集合以及接口这两个方面 除此之外 java8引入了
  • Linux系统FTP传输协议

    目录 一 FTP传输协议 什么是FTP传输协议 FTP数据连接的两种方式 二 如何使用FTP传输协议 三 设置黑白名单 设置黑名单 设置白名单 一 FTP传输协议 什么是FTP传输协议 FTP协议 文件传输协议 网络上控制文件传输的双向性
  • 中国央行数字货币或比Libra更早发行,考虑让非政府机构参与试点

    中国官员和专家们表示 中国正在测试推出中国首款央行数字货币 CBDC 的多种方式 他们预计私营机构将更多地参与创造政府支持的货币 基于一些领域正在进行的试验 引入 CBDC 的时机已经接近成熟 但与中国央行关系密切的专家们周一表示 Face
  • 区块链教育应用案例_区块链技术在教育领域中的应用研究

    来源 廊坊云报 廊坊日报讯教育对一个国家来说意味着希望 教育行业数字的应用是各行各业发展的基础 只有通过完善的教育体系 才能培育出更加优秀的人才来输送到各个行业 所以说教育领域是一个重要领域 其他重要领域的未来 包括科学 医学 农业 工业和
  • 华为hilens 系统制作

    恢复出厂设置 https support huawei com enterprise zh doc EDOC1100112066 9b0a1fba 长按RST按钮2 3秒 在这个过程中 短按电源按钮后松开 当前面板健康指示灯出现橙色 常亮
  • Debian 12 发布,迄今为止最佳 Linux 版本

    Debian 项目今天发布了 Debian 12 Bookworm 操作系统的最终版本 这是一个重大发布 带来了几个新功能 更新的组件和许多改进 凭借其长期稳定和安全的历史 Debian 12 备受全球开源爱好者的热切期待 这个新版本带来了
  • 图书馆管理系统开发(C# && Sql Server)

    图书馆管理系统 C S架构软件 开发 主要步骤 遇见问题 1 主要步骤 1 1 学习主干知识 大概懂得数据库相关sql语法 大概懂得C 语法 C 菜鸟教程 把基础篇看看 大概掌握 Net开发窗口界面 Net教程 然后可以实战一下项目 VS2
  • 将嘉立创中元件导出为AD封装库使用

    AD封装库的选择和元件的查找实在让人头大 我们不妨使用好嘉立创提供的丰富元器件库 如果想要找到想要的元件 可以直接去嘉立创EDA 标准版 的元件库中寻找 在符号类型中可以找到原理图文件 很奇怪 在嘉立创商城中直接搜索的话元器件会比在嘉立创E
  • python列表输出去掉引号_如何从导出的python列表中删除逗号、引号和圆括号?

    你们帮了我最后一个新手的忙 所以我想我会再问一次 现在 我的Python 3代码从CSV文件中获取数据 将数据存储为列表 创建该数据的排列 并以列格式将其导出回新的CSV文件 不幸的是 导出列表的格式不适合我的需要 我的问题是 如何在pyt
  • vue3.0项目报错:删除node包重新装报错

    前言 vue3 0的项目删除node包以后重新装项目 会报错 vue loader v16 找不到 安装以后下次再删包 再装会报错webpack的问题 解决办法 在新建项目后 打开pack json文件 找到 devDependencies
  • 【积累】Element-ui,el-dialog里面嵌入el-form,resetFields失效问题

    记一次element ui el dialog里面嵌入el form 使用resetFields方法初始化表单失效 问题记录 前提 当el form在一个el dialog中 dialog显示与否绑定变量 showDialog ref 为