Element的Dialog+Form使用问题

解决elementUI中el-form、el-dialog、数据回显同时用时,有bug 第一次打开网页,先点击修改,再点击新增,发现输入框竟然有值, 点击修改后,关闭对话框的时候,置空失效了 阅读详情

在这里插入图片描述
在Element的Dialog中使用表单时,可能会出现以下问题

无法清空表单校验

 <el-dialog title="新建资产" :visible.sync="addAssetsFormVisible" @close="resetForm('addAssets')">
resetForm (formName) {
  this.$refs[formName].resetFields();
  this.$refs[formName].clearValidate();
},

点击编辑,然后取消编辑后,点击新增,弹窗中所有下拉框全部出现必填校验在这里插入图片描述

解决方案

给el-dialog添加destroy-on-close属性
但是这样虽然没有大问题,可在点击编辑,然后取消编辑时,会先清空表单中的数据,再关闭弹窗,表单中数据有闪烁的效果,不太友好,暂时没找到好的方法

必须用@close,使用@closed无法清空表单数据
@closed=“resetForm(‘addAssets’)” destroy-on-close

【element-ui组件】一.elementUI组件在使用时的问题;二.elementUI的消息组件;三.Form表单;四.Dialog组件 【element-ui组件】一.elementUI组件在使用时的问题;二.elementUI的消息组件;三.Form表单;四.Dialog组件 阅读详情

相关推荐

element-ui的form表单校验踩坑

今天查看项目,发现了一个小小的bug,之前从来没注意过,记录下。 管理系统的修改跟增加功能用的同一个表单,只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样,由此,出现了一些奇怪的事情,先看看代码: 这是我改完之后故意写错的问题: <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la

weixin_47783830的博客 1449

element-ui中Dialog 对话框嵌套form表单使用label-width=“auto“遇到的坑

Dialog 对话框嵌套form表单,弹出框中的表单使用label-width=“auto”属性,在离开页面的时候就会报错(虽然不影响使用,但是控制台报错看着很烦)因为项目中auto需要auto达到自适应效果,所有只能采用第二种方法。但是Dialog 使用的又是v-show来控制的显示与隐藏,这又怎么修改为v-if呢。在网上查阅了很多,主要提供了两个办法。然后又在网上查找解决办法,例如。

fangqi20170515的博客 1899

vue3 Element Plus Dialog中的input无法获取表单焦点,需要使用两次nextTick()!!!父组件调用子组件自动获取焦点,无法实现!!!

第一个nextTick是加载对话框,第二个是加载input的form表单。父组件调用子组件自动获取焦点,无法实现。结果不管用 需要调用两次。

jieweiwujie的博客 616

ElementUI的el-dialog组件嵌套form表单

【代码】ElementUI的el-dialog组件嵌套form表单。

两年半前端练习生的博客 1912

基于LendingClub数据的信贷分析和建模报告

一:课题分析 二:数据获取 三:数据探索 3.1主要特征含义理解 3.2特征分布 3.2.1目标特征分布 3.2.2分类变量的分布 3.2.3连续数值特征分布 3.2.4时序特征分布 3.2.5文字特征分布 3.2.6两两特征的协方差 四:数据预处理 4.1数据集划分 4.2特征缺失值识别与处理 4.2.1严重缺失值的处理 4.2.2缺失值填充 4.3同值性特...

棒子皮蹦蹦床 2万+

ThingsBoard入门实战(二):ThingsBoard 设备接入

文章目录ThingsBoard 设备接入一、设备配置/设备类型二、设备三、设备接入HTTPCOAPMQTT四、下一步 ThingsBoard 设备接入 设备接入并不一定需要真正的设备,我们可以通过程序。或者命令来模拟设备,向平台发送信息。 这节我们先为用户分配一个设备,然后通过模拟设备命令更新设备的状态(遥测值)。 一、设备配置/设备类型 添加一个叫"路灯"的设备配置。 设备配置听起来比较抽象,可以认为是设备类型或者是设备类型的配置。实际上,ThingsBoard 中很多时候让选择设备类型,就是选的这个。

AIGC搞起 1万+

element-ui中Dialog对话框与其他组件的组合使用

问题场景:有时我们点击对话框时需要对话框中显示我们想要用的内容,而不只是官方示例中的表单或输入框 解决:官方文档已经给出对话框可以自定义的用法,以下是我的经验笔记 官方给出的现成的示例以及代码: 代码: <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button> <el-dialog title="收货地址" :visible.sync="dialogFormVisi

qq_44774831的博客 2410

状态转移矩阵在离散控制系统中的应用与实现步骤详解

本文深入解析了状态转移矩阵在离散控制系统中的核心作用与实现步骤。通过一个具体实例,详细演示了如何将连续状态空间模型精确离散化,计算出离散系统矩阵A_d和B_d,并分享了采样周期选择、数值计算技巧及嵌入式C语言实现等关键工程经验,为开发高性能数字控制器提供实用指南。

weixin_28454475的博客 380

vue弹窗之表单提交(el-dialog+el-form),将表单分页以幻灯片的形式播放+整体表单提交

【代码】vue弹窗之表单提交(el-dialog+el-form),将表单分页以幻灯片的形式播放+整体表单提交。

qq_42192641的博客 853

HyperMesh二次开发实战:自动化Comp与材料属性批量绑定

本文详细介绍了HyperMesh二次开发中自动化Comp与材料属性批量绑定的实战技巧。通过TCL脚本实现批量创建属性卡、智能材料分配和异常处理,大幅提升前处理效率,适用于汽车、航空航天等领域的复杂模型处理。

weixin_29214691的博客 691

Android Camera驱动开发工程师面试指南:技术深度与实战准备

摘要:上海移远通信招聘Android Camera驱动开发工程师,主要负责Camera传感器驱动开发维护、高通/展锐平台底层开发及技术预研。岗位要求1年以上嵌入式开发经验,精通Camera传感器驱动调试,熟悉高通平台Camera架构及Android HAL框架。具备HAL开发、算法集成或车载/支付行业经验者优先。工作内容以Driver/HAL开发为主,需具备硬件接口评估能力。该职位接受Linux/单片机背景人员转型。

郑伟强dev的专栏 281

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

记一次element-ui,el-dialog里面嵌入el-form,使用resetFields方法初始化表单失效,问题记录: 前提:          当el-form在一个el-dialog中,dialog显示与否绑定变量 showDialog,ref 为 editForm_ref ,e-lform的model绑定了一个对象editForm,初...

qq_35164817的博客 5767

Linux ARM平台开发系列讲解(摄像头V4L2子系统) 2.12.5 V4L2 control的原理和实现

既然涉及到视频输入,就会有很多与 相关的效果,比如对比度、饱和度、色温、白平衡等等,这些都是通用的、必须的控制项,并且大多数仅需要设置一个整数值即可。 内核中已经为我们提供了这个控制类型的,我们只需要明确自己需要添加什么控制类型,然后将其添加进内核中即可。该部分摄像头代码一半厂家会提供驱动或者相对应的参数,否则没有图像处理知识很难开发出来。 返回总目录...

DSMGUOGUO的博客 1436

【vue】element form/input/select 组件 赋值后无法编辑的问题

今天在使用element form组件时,想创建一个修改的dialog ,赋上当前值再修改传后台 开始代码如下 HTML部分: <el-dialog :visible.sync="updateDialogVisible" title="编辑任务" width="50%"> <el-form :model="updateForm" ref="updateForm"> <el-row> <el-form-item lab

Hypnotic0624的博客 2660

Vue3 - Element Plus 全局修改更换主题色配置详细教程,element-plus自定义主题色全局替换主色调强力解决方案,支持动态修改主题颜色/动态皮肤,将默认蓝色主题色更换为其他颜色!

vue3,nuxt3,element-plus,组件库,主题色,修改主题颜色,更换主题色,如何修改组件默认主题蓝色,项目主题色定制,修改失败,主题色覆盖不了,:root直接修改,hover颜色没改,自定义主题色,vue3全局设置elementPlus主题色最新详细修改教程,怎么修改全局的颜色,scss变量,覆盖原来的主题色改为自己的颜色,统一替换,有没有好办法,颜色不变,失败,无效,动态主题切换,主题颜色怎么在项目里直接改,plus主题色更换,覆盖默认主题色,最强最好用,设置主题色,换肤,皮肤,动态更换

🏆 前端领域优质创作者 1万+

IEEE S&P 2026 大模型安全论文整理

本文梳理了 IEEE S&P 2026(第47届 IEEE 安全与隐私研讨会)中与 LLM Safety 相关的论文,涵盖大模型越狱攻击、防御与对齐、隐私保护、RAG 安全、多模态大模型安全、智能体安全、图-LLM 安全、工具链安全及生成式 AI 安全与隐私等方向。

CSPhD-winston的博客 1336

使用elementui的el-dialog组件,里面包含子组件时,用refs调用子组件时出现undefined问题

问题: 使用elementui时,在el-dialog组件中套入了el-form组件,代码如下: <el-dialog :title="textMap1[dialogStatus1]" :visible.sync="dialogFormVisible1" @close="clear" > <el-form :model="trialForm" ref="ruleForm" label-

李瑞清的博客 995

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

element-plus弹窗中el-form使用resetFields方法不生效

element-plus弹窗中使用el-form resetFields方法失效问题解决

weixin_41586389的博客 1999

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

element-ui 打开el-dialog弹窗,会改变el-table表格的数据

element-ui 打开el-dialog弹窗,会改变el-table表格的数据 深拷贝处理数据即可 <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.row)">查看</el-button> </template> </el-t

ma_ly的博客 939

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

关于element表单重置resetFields()不生效问题

问题描述 使用element对话框Dialog,添加编辑使用一个弹出框时,发现使用表单重置方法resetFields()不生效,也就是点击编辑之后关闭弹框,再点击添加,此时弹出框表单仍然保留编辑项的内容而不是全新的空表单。 弹框的@close='resetForm'关闭事件绑定了重置表单以及表单验证的方法 resetForm(){ //重置表单 this.$refs.form.resetFields(); //重置表单验证 this.$refs.form.cl

Stead_Fast的博客 4729

element-ui 使用时遇到的一些坑

element-ui,是一款基于vue2.0的快速构建框架的前端组件。使用起来方便快捷,非常适合快速开发。但是,使用别人的通用组件有一个通病,那便是,做自己的项目常常会有自己的需求,是和组件组件本身相冲的。这时候的你就会陷入是无尽的烦恼中,如何既可以使用这个组件又可以达到自己想要的效果。这里我开设一个帖子,来记录我在项目开发中使用element-ui所遇到的坑,及解决方法。 1.tree组件中识...

weixin_42177497的博客 2685

element-ui+vue使用时遇到的坑

element-ui+vue使用时遇到的坑

tendernessxy的博客 3680

resetFields 无法重置的问题

1、问题分析: vue + element-ui 使用 dialog + form 进行编辑和新增,编辑和新增共用该 dialog + form 组件,如果先点击编辑再点击新增,会出现表单无法重置的情况,使用 this.$refs[‘form’].resetFields() 无效 2、解决 2.1、其实在 data 中定义的 form 表单字段是表单的初始值,在 mounted 中会调用 resetFields 方法,该方法会保存 form 表单的初始值,在调用该方法时会将初始值重新赋值给 form 表单字

weixin_42497122的博客 1446

ElementUI问题汇总---kalrry

一、el-dialog设置宽度问题 <el-dialog v-model="dialogFormVisible" title="信息维护界面" :width="width"> //给绑定width在data中写入数值

kalrry 1271

vue使用h函数封装dialog组件,以命令的形式使用dialog组件

如果我们把这些弹窗都写html中会有一大坨因此:我们需要把弹窗封装成命令式的形式。

SQVIoMPLe的博客 189

element-ui 打开el-dialog弹窗,会改变el-table表格的数据处理方案

element-ui 打开el-dialog弹窗,会改变el-table表格的数据处理方案

在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖 749
上一篇: Linux中安装Node
下一篇: 安装Android Studio
My_Java_Life
博客等级 码龄11年 39粉丝 61原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值