el-form-item设置间距
时间: 2023-09-10 15:10:23 浏览: 2367
el-table,el-form在vue中封装组件化,含操作按钮和插槽.pdf
5星 · 资源好评率100%
要在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 ]
阅读全文