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

news2024/11/24 17:28:12

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

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

1. el-dialog设置高度

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

 <el-dialog
    title="选择图标"
    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.coloradmin.cn/o/970436.html

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

相关文章

台灯显色指数多少好?挑选护眼台灯需要注意什么

台灯可以说家家必备&#xff01;家中有上学的小孩更是需要一款好台灯&#xff0c;因为看书、写字、做作业都离不开台灯&#xff0c;一款好的台灯不仅会提供明亮的学习环境&#xff0c;而且还能保护视力&#xff0c;预防近视&#xff0c;因此&#xff0c;挑选台灯绝对不可以马虎…

LeetCode 剑指offer 09.用两个栈实现队列

LeetCode 剑指offer 09.用两个栈实现队列 题目描述 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素&#xff0c;deleteHead 操作返回…

未来十年,AIGC将彻底颠覆内容生产行业

1950年&#xff0c;艾伦图灵提出了著名的“图灵测试”给出了判定机器是否具有“智能”的试验方法。从某种程度上&#xff0c;人工智能从那时起就被赋予了用于内容创作的期许。 经过了半个多世纪的发展&#xff0c;随着数据快速积累、算力性能提升和算法效力增强&#xff0c;我…

Execl+Python

一、读取Execl 1.获取单元格B2到C5区域内的数据 import openpyxlnew_filename data/normal_1000.xlsx wb openpyxl.load_workbook(new_filename) _sheet wb[北京] #根据sheet名字获取内容 for cell_row in _sheet[B2:C5]:for cell in cell_row:print(cell.value)#获取第一…

【Elsevier旗下】中科院1区TOP,影响因子9分+,23天录用!极速见刊!

极速见刊推荐 中科院 1区&#xff08;TOP&#xff09; 出版社&#xff1a;Elsevier 影响因子&#xff1a;IF&#xff08;2022&#xff09;9.0-10.0 期刊分区&#xff1a;JCR1区&#xff0c;中科院1区&#xff08;TOP&#xff09; 检索情况&#xff1a;SCIE 在检&#xff…

【C语言】深度讨论使代码更严谨,更优雅的方式

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;C语言 &#x1f525;该篇将从多个部分探讨如何写出更严谨&#xff0c;更优雅的代码。 &#x1f30f;该文章借鉴《高质量 C/C 编程指南》——…

电梯SIP-IP五方对讲管理系统

电梯SIP-IP五方对讲管理系统 是深圳锐科达精心打磨的一款IP数字信号对讲设备&#xff0c;是在传统电梯对讲系统基础上的一次全新升级&#xff0c;突破了模拟、FM调频系统存在的技术障碍&#xff0c;实现联网;在模/数交替的过程中&#xff0c;继承了模拟、FM调频系统的优点&…

Spring Cloud Alibaba-@SentinelResource的使用

1 SentinelResource的使用 在定义了资源点之后&#xff0c;我们可以通过Dashboard来设置限流和降级策略来对资源点进行保护。同时还能 通过SentinelResource来指定出现异常时的处理策略。 SentinelResource 用于定义资源&#xff0c;并提供可选的异常处理和 fallback 配置项。…

Rockchip RK3399 - DRM子系统

从开始接触音频子系统到如今已经两个多月&#xff0c;说实话花费的时间的确有点长了。从今天起我们开始接触DRM&#xff0c;网上已经有很多优秀的关于DRM的文章了&#xff0c;因此我们学习直接去学习一些优秀的文章即可。后面有关DRM相关的文章我们会大量参考[1] DRM (Direct R…

每日刷题(回溯法经典问题之组合)

食用指南&#xff1a;本文为作者刷题中认为有必要记录的题目 ♈️今日夜电波&#xff1a;保留—郭顶 1:33 ━━━━━━️&#x1f49f;──────── 4:30 &#x1f504; ◀️ ⏸ ▶️ ☰ …

华为数通方向HCIP-DataCom H12-821题库(单选题:261-280)

第261题 以下关于IPv6过渡技术的描述,正确的是哪些项? A、转换技术的原理是将IPv6的头部改写成IPv4的头部,或者将IPv4的头部改写成IPv6的头部 B、使用隧道技术,能够将IPv4封装在IPv6隧道中实现互通,但是隧道的端点需要支持双栈技术 C、转换技术适用于纯IPv4网络与纯IPv…

一文速览嵌入式六大出口

嵌入式行业的前景确实十分广阔&#xff0c;并且在许多领域都发挥着重要作用。以下是一些关键点&#xff0c;说明嵌入式系统的发展潜力和前途&#xff1a; 1. 物联网&#xff08;IoT&#xff09;&#xff1a;嵌入式系统是实现智能家居、智能城市、智能工厂等物联网设备的核心。物…

【网络教程】群晖轻松设置钉钉机器人使用Webhook发送通知消息,分分钟搞定!

文章目录 准备设置相关链接准备 演示环境:群晖DSM7.2(其他版本操作雷同)需要提前准备好你的钉钉机器人webhook链接,如果你还不会设置/获取,请点击 参考这篇文章 或自行某度设置 打开群晖,进入控制面板 —> 通知设置 —> Webhooks,如下图 然后点击新增,提供商选择…

深兰科技再次荣登“全球独角兽企业500强排行榜”

9月1日&#xff0c;由青岛市人民政府、中国人民大学中国民营企业研究中心共同主办&#xff0c;青岛市民营经济发展局、崂山区人民政府、北京隐形独角兽信息科技院承办的&#xff0c;以“塑造产业发展新优势&#xff0c;激发经济发展新活力”为主题的“2023第五届全球独角兽企业…

vue router进行路由跳转并携带参数(params/query)

在使用router.push进行路由跳转到另一个组件时&#xff0c;可以通过params或query来传递参数。 1. 使用params传参&#xff1a; // 在路由跳转时传递参数 router.push({ name: targetComponent, params: {paramName: paramValue // 参数名和值 } });// 在目标组件中通过$r…

Vue3回到顶部(BackTop)

效果如下图&#xff1a;在线预览 APIs 参数说明类型默认值必传bottomBackTop 距离页面底部的高度number | string40falserightBackTop 距离页面右侧的宽度number | string40falsevisibilityHeight滚动时触发显示回到顶部的高度number180falsetoBackTop 渲染的容器节点 可选 元…

05. 逻辑门和加法器等原理探究

1. 二极管 1.1 什么是二极管 二极管是一种电子元件&#xff0c;它的主要特点是只允许电流在一个方向通过&#xff0c;而另一个方向电流将被阻止。 下面是二极管的示意图: 电流往箭头指向的地方流 1.2 二极管的作用 下面第一个图&#xff1a;给灯泡加上正负电压&#xff0c;…

pcapng 文件转 pcap 文件

pcap 是早期计算机网络抓包格式,几乎所有抓包工具都支持pcap&#xff1b;pcapng 是下一代抓包格式&#xff0c;支持不同路线以寻求标准化&#xff0c;pcapng格式通过使用标准化块和字段来实现可扩展性需求。 在tcpreplay重放数据包的时候&#xff0c;手里只有pcapng文件&#…

【牛客网题目】合并k个已排序的链表

目录 描述 题目分析 描述 合并 k 个升序的链表并将结果作为一个升序的链表返回其头节点。 数据范围&#xff1a;节点总数 0≤n≤5000&#xff0c;每个节点的val满足∣val∣<1000 要求&#xff1a;时间复杂度 O(nlogn) 示例1 输入&#xff1a;[{1,2,3},{4,5,6,7}]返回值…

地质灾害监测方案(地质灾害监测原理与方法)

我国坡地较多,地质灾害时有发生,给人民生命财产安全和经济建设造成严重威胁。采用工业物联网技术进行地质灾害监测,可以实现对山体移动、边坡变形等地质灾害的预警和实时监测,保护人民生命财产安全。现提出如下地质灾害监测方案: 1. 监测场景:针对易发地质灾害的区域,如矿山边坡…