el-dialog设置高度、使用resetFields清除表单项无效问题

初学者容易踩坑的的el-dialog、el-form问题

  • 1. el-dialog设置高度
  • 2. el-form中表单项对不齐
  • 3. 使用resetFields清除表单项无效

1. el-dialog设置高度

el-dialog中里面添加一个div设置固定高度,或者限制最小的高度。

 <el-dialogtitle="选择图标"v-model="iconDialogVisible":close-on-click-modal="false":width="480"destroy-on-close><div class="system-icon-content"></div</el-dialog>
.system-icon-content {min-height: 300px;max-height: 400px;overflow: auto;
}

以下是我尝试过但无效的方法:
(1)在el-dialog外面包裹一个div,给它设置样式
(2) 在el-dialog上自定义样式,使用deep去穿透样式
(3)使用 !important

2. el-form中表单项对不齐

在这里插入图片描述

设置固定的label-width
在这里插入图片描述

3. 使用resetFields清除表单项无效

每次打开表单在 nextTick中调用表单的resetFields方法

const showEditDialog = async (type: 'add' | 'mod', row?) => {await getInterfaceList();nextTick(() => {ruleFormRef?.value?.resetFields();})state.editType = type;if (type === 'add') {state.dialogTitle = '添加策略配置';} else {state.dialogTitle = '编辑策略配置';state.ruleForm = _.cloneDeep(row);//防止编辑时的表单影响这行表格数据state.oldCode = row.code;}
};

如果表单中有非必填项,还是清除不掉:
因为resetFields方法只对具有校验的表单元素才有效。
可以将在弹窗关闭时将表单赋值为空,手动重置表单项。
注意:不要去使用destroy-on-close`,会出现第二次打开表单时上回的值还存在的问题

<el-drawer v-model="visible" :title="state.dialogTitle" direction="rtl" size="400px" :close-on-click-modal="false"@close="handleClose"></el-drawer>   
const handleClose = () => {visible.value = false;ruleFormRef.value?.resetFields();// 只会重置必填项表单项(el-form-item有prop那个),并移除校验结果state.ruleForm = {} 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/122377.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构 - 单链表

文章目录 目录 文章目录 一、什么是链表? 线性表: 顺序表: 二、链表的分类和实现 分类: 实现: 1.创建节点类 2.创建单链表 1.addTail(尾增) 2.删除节点值为key的第一个节点 3.插入节点(在指定位置) 4.获取链表长度 总结 前言 大家好,这篇博客给大家讲一下什么是…

『虫无涯→_→读书推荐02期』|全面系统的〖Effective软件测试〗带你完成所有不同类型的测试,GO

目录 我看的书 我的书评/推荐理由 书籍的作者 书籍内容 赠书活动 我看的书 首次看到这本书的封面的时候&#xff0c;我被那个数字惊呆了&#xff0c;【助理软件研发提升10倍质量】&#xff0c;这对我产生了足够了吸引力。因为这个数字是非常的客观的&#xff1b;至于书…

Matlab信号处理2:方波信号的合成与分解

周期信号可展开为傅里叶级数&#xff0c;因此方波信号可用若干谐波去拟合。以下是Matlab的实现&#xff1a; %% 方波信号的分解% 1.生成方波信号 % 方波信号周期、基波频率 T0 2; w0 (2 * pi) / T0; % 方波信号值为1的区间 T1 0.5; % 绘图周期&#xff1a;(2*n1)个周期 n …

化繁为简 面板式空调网关亮相上海智能家居展 智哪儿专访青岛中弘赵哲海

面对中央空调协议不开放和智能家居协议不统一的问题&#xff0c;青岛中弘选择中央空调控制器这一细分赛道入局智能家居市场&#xff0c;始终贯彻“所有空调&#xff0c;一个网关”的产品技术理念&#xff0c;逐渐探索出一条中弘的发展路径和商业模式。 在2023年的SSHT上海国际智…

【css】z-index与层叠上下文

z-index属性用来设置元素的堆叠顺序&#xff0c;使用z-index有一个大的前提&#xff1a;z-index所作用元素的样式列表中必须有position属性并且属性值为absolute、relative或fixed中的一个&#xff0c;否则z-index无效。 层叠上下文 MDN讲解 我们给元素设置的z-index都是有一…

MPDIoU: A Loss for Efficient and Accurate Bounding BoxRegression

MPDIoU: A Loss for Efficient and Accurate Bounding BoxRegression MPDIoU:一个有效和准确的边界框损失回归函数 摘要 边界框回归(Bounding box regression, BBR)广泛应用于目标检测和实例分割&#xff0c;是目标定位的重要步骤。然而&#xff0c;当预测框与边界框具有相同的…

Qt---对话框 事件处理 如何发布自己写的软件

目录 一、对话框 1.1 消息对话框&#xff08;QMessageBox&#xff09; 1> 消息对话框提供了一个模态的对话框&#xff0c;用来提示用户信息&#xff0c;或者询问用户问题并得到回答 2> 基于属性版本的API 3> 基于静态成员函数版本 4> 对话框案例 1、ui界面 …

visual studio 2008 编译项目出现层次不穷问题枚举

文章目录 1、严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C1047 对象或库文件“.lib”是使用与其他对象(如“x64\Release\main.obj”)不同的1、错误原因 2、意外的预编译头错误,只需重新运行编译器就可能修复此问题3、 warning LNK4099: 未找到 PDB“vc90.pdb”(使用“..…

微信小程序案例2-1:学生信息

文章目录 一、运行效果二、涉及知识点&#xff08;一&#xff09;常用组件1、view组件2、image组件 &#xff08;二&#xff09;rpx单位1、什么rpx单位2、rpx与px相互换算 三、实现步骤&#xff08;一&#xff09;创建项目&#xff08;二&#xff09;准备图像素材&#xff08;三…

测试需求分析

什么是软件测试需求&#xff1a; 灰度测试&#xff1a;先发布部分功能&#xff0c;然后看用户的反馈&#xff0c;再去发布另外一部分的更新 A/B测试&#xff1a;先发布的功能先让A部分的用户进行更新&#xff0c;再根据用户的犯困再更新B用户的功能 需求测试&#xff1a; 功…

Nginx从安装到使用,反向代理,负载均衡

什么是Nginx&#xff1f; 文章目录 什么是Nginx&#xff1f;1、Nginx概述1.1、Nginx介绍1.2、Nginx下载和安装1.3、Nginx目录结构 2、Nginx命令2.1、查看版本2.2、检查配置文件正确性2.3、启动和停止2.4、重新加载配置文件2.5、环境变量的配置 3、Nginx配置文件结构4、Nginx具体…

Spring依赖注入

Spring两大特性&#xff1a;IOC控制反转、AOP面向切面编程。 IOC&#xff1a;控制反转&#xff0c;把创建对象的过程交给 Spring 进行管理&#xff08;DI&#xff1a;依赖注入&#xff0c;在IoC容器内将有依赖关系的bean进行关系绑定。成员变量有两种注入方式&#xff1a;set注…

华为云云服务器评测|云耀云服务器L实例快速部署MySQL使用指南

文章目录 前言云耀云服务器L实例介绍什么是云耀云服务器L实例&#xff1f;产品优势智能不卡顿价优随心用上手更简单管理更省心 快速购买查看优惠卷购买 安装MySQL重置密码安装更新apt的软件源列表安装MySQL 设置用户名、密码、权限配置安全组 总结 前言 哈喽大家好&#xff0c…

Xcode,swift:Error Domain=kCLErrorDomain Code=1 (null)问题解决

问题描述: iOS开发时,当使用用户的位置权限时,获取用户经纬度报错:Error DomainkCLErrorDomain Code1 "(null)",错误域kCLError域代码1“(null)” 解决方法: 打开模拟机的设置-通用-语言与地区 将地区设置为中国(如果你的开发位置在中国的话) 点击左上方Features,选择…

ES6中的箭头函数(arrow function)与普通函数的不同之处

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 语法简洁⭐ 没有自己的this⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、…

2605. 从两个数字数组里生成最小数字

文章目录 Tag题目来源题目解读解题思路方法一&#xff1a;枚举比较法方法二&#xff1a;集合的位运算表示法 写在最后 Tag 【贪心】【位运算】【数组】 题目来源 2605. 从两个数字数组里生成最小数字 题目解读 给定两个各自只包含数字 1 到 9 的两个数组&#xff0c;每个数组…

一日一技:Python如何同时调用多个GPT的API?

相信很多同学或多或少都在Python中使用过GPT API&#xff0c;通过Python安装openai库&#xff0c;来调用GPT模型。 OpenAI官方文档中给出了一个示例&#xff0c;如下图所示&#xff1a; OpenAI API 测试 如果你只有一个API账号&#xff0c;那么你可能不觉得这样写有什么问题。…

国内首个侧重能源金融交易的中国社科院-美国杜兰大学能源管理硕士

国内首个侧重能源金融交易的中国社科院-美国杜兰大学能源管理硕士 作为国内首个且唯一侧重能源金融交易的硕士项目&#xff0c;中国社科院与美国杜兰大学合作举办的能源管理硕士&#xff08;Master of Management in Energy&#xff09;项目旨在培养具备国际视野的高级能源金融…

网络协议从入门到底层原理学习(二)—— Mac地址/IP地址

文章目录 网络协议从入门到底层原理学习&#xff08;二&#xff09;—— Mac地址/IP地址1、MAC地址2、MAC地址的表示格式3、MAC地址表4、MAC地址操作5、MAC地址的获取6、ARP7、ICMP8、IP地址9、IP地址的分类和格式10、不同分类的IP地址的范围11、特殊 IP 地址12、子网掩码13、子…

Elasticsearch,Logstash和Kibana安装部署(ELK Stack)

前言 当今数字化时代&#xff0c;信息的快速增长使得各类组织和企业面临着海量数据的处理和分析挑战。在这样的背景下&#xff0c;ELK Stack&#xff08;Elasticsearch、Logstash 和 Kibana&#xff09;作为一套强大的开源工具组合&#xff0c;成为了解决数据管理、搜索和可视…