el-form表单底部与其他组件出现距离过大问题

场景:当在使用el-form绘制表单时,明明所有样式都书写正确,就是不明白为何form与底下其他组件会出现距离过宽的状况,且调试时一直定位不到。反复检查代码并结合调试才发现,在el-form里面给其中一个el-form-item内的el-button用到了v-if,导致el-button在没有显示的情况下,el-form-item却有自己的样式并且显示出来了,因此影响了整体布局。

注意:在使用el-form表单时,若想控制el-form内的某个表单项el-form-item的显示与隐藏,需要将隐藏条件放在el-form-item中,不能放在el-form-item的内容中,否则只是el-form-item中的内容没有显示,而el-form-item仍会显示并占内容,且有它自己的样式,这样会影响整体布局。例如:

将 v-if="isShow" 放在button里面,是错误的,这样会导致el-form-item仍显示从而影响我们想要的目标布局

在这里插入图片描述
应改成以下这种写法:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vxe-table是一个基于vue的表格组件,支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、模态窗口、自定义模板、灵活的配置项、丰富的扩展插件等... 设计理念: 面向现代浏览器,高效的简洁 API 设计 模块化表格、按需加载、插件化扩展 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能 功能: Basic table (基础表格) Grid (高级表格) Size (尺寸) Striped (斑马线条纹) Table with border (带边框) Cell style (单元格样式) Column resizable (列宽拖动) Maximum table height (最大高度) Resize height and width (响应式宽高) Fixed column (固定列) Grouping table head (表头分组) Highlight row and column (高亮行、列) Table sequence (序号) Radio (单选) Checkbox (多选) Sorting (排序) Filter (筛选) Rowspan and colspan (合并行或列) Footer summary (表尾合计) Import (导入) Export (导出) Print (打印) Show/Hide column (显示/隐藏列) Loading (加载中) Formatted content (格式化内容) Custom template (自定义模板) Context menu(快捷菜单) Virtual Scroller(虚拟滚动) Expandable row (展开行) Pager(分页) Form(表单) Toolbar(工具栏) Tree table (树形表格) Editable CRUD(增删改查) Validate(数据校验) Data Proxy(数据代理) Keyboard navigation(键盘导航) Modal window(模态窗口) Charts(图表工具) 更新日志: v4.0.20 table 修改单选框、复选框获取值错误问题 grid 修复 KeepAlive 中报错问题
要在el-form-item中设置间距,可以在CSS中使用margin-bottom属性来实现。例如,可以通过设置.el-form-item的margin-bottom为0来消除表单组件之间的间距。 这样,el-form-item之间的间距将被设置为0像素。这样可以有效地控制el-form-item间距,并实现所需的布局效果。注意,要确保将这个样式规则应用到相应的el-form-item上。在el-form中使用v-if来控制el-form-item的显示与隐藏时,需要将隐藏条件放在el-form-item中,而不能放在el-form-item的内容中。这样可以确保el-form-item不会影响整体布局,并且只有在满足隐藏条件时才会显示。这些方法可以解决el-form-item间距设置问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [修改ElementUI默认表单项el-form-item间距](https://blog.csdn.net/qq_35462323/article/details/123084943)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [el-form表单底部与其他组件出现距离过大问题](https://blog.csdn.net/weixin_50077864/article/details/127362867)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [插入表单form上下都会空出一行的解决方法](https://download.csdn.net/download/weixin_38556205/13681897)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值