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.mzph.cn/news/68380.shtml

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

相关文章

附录1-爬虫的一些技巧

目录 1 寻找url与显示内容的关系 2 修改请求头 3 局部刷新 4 阅读返回信息 5 多尝试页面其他的使用方式 6 尝试不同类型参数 7 表单类型的post多用data发&#xff0c;接口类型的post多用json发 8 消除degger 9 你在浏览器上看到的html与你下载下来的html不一…

嵌入式学习笔记(12)汇编写启动代码之设置栈和调用C语言

C语言运行时需求和栈的意义 “C语言运行时&#xff08;runtime&#xff09;”需要一定的条件&#xff0c;这些条件由汇编来提供。C语言运行时主要是需要栈。 C语言和栈的关系&#xff1a;C语言中的局部变量都是用栈来实现的。如果我们汇编部分没有给C部分预先设置合理合法的栈…

【STM32】学习笔记-时间戳RTC

Unix时间戳 Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒 时间戳存储在一个秒计数器中&#xff0c;秒计数器为32位/64位的整型变量 世界上所有时区的秒计数器相同&#xff0c;不同时区通…

命令执行漏洞复现攻击:识别威胁并加强安全

环境准备 这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 一、攻击相关介绍 原理 主要是输入验证不严格、代码逻辑错误、应用程序或系统中缺少安全机制等。攻击者可以通过构造特定的输入向应用程序或系统注入恶意代码&#xff…

Linux下 /sys/class 一些操作

Linux下&#xff0c;/dev、/sys/class的区别 /dev下面有很多节点&#xff0c;每一个节点代表一个设备&#xff0c;/dev目录下面是按物理器件进行分类&#xff1b;而/sys/class下面的更多是按功能抽象出来的。 参考1 demo 在正点原子的基础上进行演示 #include <linux/ty…

基于Matlab实现多个图像压缩案例(附上源码+数据集)

图像压缩是一种将图像数据量减少的技术&#xff0c;以减少存储空间和传输带宽的需求。在本文中&#xff0c;我们将介绍如何使用Matlab实现图像压缩。 文章目录 简单案例源码数据集下载 简单案例 首先&#xff0c;我们需要了解图像压缩的两种主要方法&#xff1a;有损压缩和无…

防火墙日志分析工具

防火墙提供对进入组织网络的网络流量的来源和类型的可见性&#xff0c;这使得防火墙日志成为重要的信息源&#xff0c;包括所有连接的源地址、目标地址、协议和端口号等详细信息&#xff0c;此信息可以提供对未知安全威胁的见解&#xff0c;是威胁管理中的重要工具。 防火墙日…

bat批处理——统计当前文件夹下的所有文件名

一、在当前文件夹下建立XX.txt文件&#xff0c;将指令dir *.* /b/s>test.txt写到XX.txt文件中 测试文件夹目录及文件结构图&#xff1a; 指令说明&#xff1a; dir *.* /b/s>test.txt /*** 此部分为注释内容* dir 获取当前目录下的目录及文件* *.* 对文件进行筛选&…

手写Mybatis:第17章-Plugin插件功能实现

文章目录 一、目标&#xff1a;Plugin插件二、设计&#xff1a;Plugin插件三、实现&#xff1a;Plugin插件3.1 工程结构3.2 Plugin插件代理模式类图3.3 自定义拦截注解3.3.1 方法签名3.3.2 拦截注解 3.4 拦截器接口定义3.4.1 调用信息3.4.2 拦截器接口 3.5 类代理包装操作3.5.1…

冯诺依曼体系结构/什么是OS?

一、体系结构图 示意图 控制器可以控制其它4个硬件&#xff0c;四个硬件直接可以进行数据传输。 5大硬件 但是这些个体需要用“线”连接。 为什么要有存储器&#xff1f; 如果没有&#xff0c;实际速度则为输入、输出设备的速度。 加上后&#xff0c;变为内存的速度。&#…

大厂面试 | 百度一面,顶不住

题目来源&#xff1a;https://www.nowcoder.com/feed/main/detail/d39aabc0debd4dba810b4b9671d54348 前文 本期是【捞捞面经】系列文章的第 2 期&#xff0c;持续更新中…。&#xff08;更多与往期下方仓库直达&#xff09; 《捞捞面经》系列正式开始连载啦&#xff0c;据说看…

Kubernetes(k8s) 架构原理一文详解

目录 一、k8s 概述 1.什么是k8s&#xff1f; 2.特性 3.主要功能 三、集群架构与组件 1.Master 组件 &#xff08;1&#xff09;Kube-apiserver &#xff08;2&#xff09;Kube-controller-manager &#xff08;3&#xff09;Kube-scheduler 2.配置存储中心 3.Node 组…

【Sentinel】ProcessorSlotChain处理器插槽链与Node

文章目录 1、Sentinel的基本概念2、ProcessorSlotChain3、Node 1、Sentinel的基本概念 Sentinel实现限流、隔离、降级、熔断等功能&#xff0c;本质要做的就是两件事情&#xff1a; 统计数据&#xff1a;统计某个资源的访问数据&#xff08;QPS、RT等信息&#xff09;规则判断…

一文读懂GPU显卡的10个重要参数

在当今的高性能计算机世界中&#xff0c;GPU显卡的性能至关重要。这一领域的快速发展&#xff0c;使得图形渲染、游戏体验、视频编辑等高性能计算任务变得更加高效和流畅。正因如此&#xff0c;选择一款合适的GPU显卡变得越来越重要。在挑选GPU显卡时&#xff0c;了解其关键参数…

【真题解析】系统集成项目管理工程师 2023 年上半年真题卷(综合知识)

本文为系统集成项目管理工程师考试(软考) 2023 年上半年真题(全国卷),包含答案与详细解析。考试共分为两科,成绩均 ≥45 即可通过考试: 综合知识(选择题 75 道,75分)案例分析(问答题 4 道,75分)综合知识(选择题*75)1-10 题11-20 题21-30 题31-40 题41-50 题51-60 …

进程、线程与构造方法

进程、线程与构造方法 目录 一&#xff0e; 进程与线程1. 通俗解释2. 代码实现3. 线程生命周期&#xff08;图解&#xff09; 二&#xff0e; 构造方法 一&#xff0e; 进程与线程 1. 通俗解释 进程&#xff1a;就像电脑上运行的软件&#xff0c;例如QQ等。 线程&#xff1a;…

接口测试与功能测试的区别~

今天为大家分享的是我们在日常测试工作中, 一定会接触并且目前在企业中是主要测试内容的 功能测试与接口测试 一.功能测试与接口测试的基本概念。 1.1 什么是功能测试呢? 功能测试: 是黑盒测试的一方面, 检查实际软件的功能是否符合用户的需求 功能测试测试的内容包括以下…

改变金融贷款市场营销方式 ---- 运营商大数据精准获客

与传统的企业网络营销相比&#xff0c;最常见的是网络推广和硬广告推广。一些企业无法找到可靠准确的数据来源&#xff0c;也无法找到一些未知的总数据。这些数据大多存在持续时间长、准确性差的缺点&#xff0c;企业在将这些数据信息应用于商品在线营销时往往会遇到不足。 在…

SpringCloudAlibaba之Sentinel介绍

文章目录 1 Sentinel1.1 Sentinel简介1.2 核心概念1.2.1 资源1.2.2 规则 1.3 入门Demo1.3.1 引入依赖1.3.2 集成Spring1.3.3 Spring中资源规则 1.4 Sentinel控制台1.5 核心原理1.5.1 NodeSelectorSlot1.5.2 ClusterBuilderSlot1.5.3 LogSlot1.5.4 StatisticSlot1.5.5 Authority…

Nacos 开源版的使用测评

文章目录 一、Nacos的使用二、Nacos和Eureka在性能、功能、控制台体验、上下游生态和社区体验的对比&#xff1a;三、记使使用Nacos中容易犯的错误四、对Nacos开源提出的一些需求 一、Nacos的使用 这里配置mysql的连接方式&#xff0c;spring.datasource.platformmysql是老版本…