当前位置: 首页 > news >正文

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.lryc.cn/news/154599.html

相关文章:

  • MySql切换到达梦数据库,各种问题解决记录
  • 2023开学礼山东财经大学《乡村振兴战略下传统村落文化旅游设计》许少辉新财经图书馆
  • vscode中使用eslint+prettier的配置
  • HTML 标签讲解
  • ue5 小知识点 ue的world type,pie editor game
  • 两表union 如何保证group by 字段唯一
  • 【⑰MySQL】 变量 | 循环 | 游标 | 处理程序
  • 如何在arXiv上发表一篇文章
  • 重要性采样
  • 说说Omega架构
  • 高忆管理:光刻胶概念强势拉升,同益股份、格林达涨停
  • 计算机图形学线性代数相关概念
  • 开源PHP 代挂机源码,可对接QQ、网易云、哔哩哔哩、QQ空间、等级加速等等
  • 【仿牛客论坛java项目】第五章 Kafka,构建TB级异步消息系统:阻塞队列、Kafka入门、Spring整合Kafka、发送系统通知、显示系统通知
  • 【AIGC专题】Stable Diffusion 从入门到企业级实战0401
  • Matlab信号处理1:模拟去除信号噪声
  • Bootstrap的行、列布局设计(网络系统设计)
  • 1.1 计算机网络在信息时代中的作用
  • mysql CONCAT使用
  • maven基础学习
  • uniapp移动端地图,点击气泡弹窗并实现精准定位
  • 2023牛客暑期多校训练营7 CI「位运算」「根号分治+容斥」
  • YOLOv5算法改进(10)— 替换主干网络之GhostNet
  • Android Canvas的使用
  • AI批量写文章伪原创:基于ChatGPT长文本模型,实现批量改写文章、批量回答问题(长期更新)
  • git常用场景记录 | 拉取远程分支A合并到本地分支B - 删除上一次的commit
  • 源码角度解析SpringBoot 自动配置
  • 【原创】H3C路由器OSPF测试
  • 计算机视觉:轨迹预测综述
  • 三维跨孔电磁波CT数据可视化框架搭建