使用el-row及el-col页面缩放时出现空行的问题及解决
更新时间：2024年03月19日 08:52:41 作者：じòぴé南冸じょうげん
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题
当缩放到90%或者110%，选中下拉后，下方就会出现空行
如下图所示：
关于el-row 和 el-col
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| span | 栅格占据的列数 | number | — | 24 |
| offset | 栅格左侧的间隔格数 | number | — | 0 |
| push | 栅格向右移动格数 | number | — | 0 |
| pull | 栅格向左移动格数 | number | — | 0 |
el-row 和 el-col 应该配合使用，并且 el-col 应该包含在 el-row 中。
同时，检查 el-col 的 span 属性或者offset属性是否设置正确，它决定了列在栅格系统中的宽度占比。
如果为 row 或 col 设置了固定的宽度或高度，当页面缩放时，这些固定尺寸的元素可能无法适应新的容器大小，从而导致布局问题或空行出现。
代码
如下：
<div v-show="radioActive == '2'">
<el-row >
<el-col :span="10" :offset="1" v-for="(item,index) in temList" :key="index">
<el-form-item :label="`${item.printTitle}`" label-width="110px">
<el-select
v-model="item.printId"
clearable
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(v,i) in temList[item.moduleType]"
:key="i"
:label="v.moduleName"
:value="v.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row >
</div>解决方案
使用弹性盒子，自动换行即可
display: flex; flex-wrap: wrap;
完整代码如下：
<el-row >
<div v-show="radioActive == '2'" style=" display: flex;flex-wrap: wrap;">
<el-col :span="10" :offset="1" v-for="(item,index) in temList" :key="index">
<el-form-item :label="`${item.printTitle}`" label-width="110px">
<el-select
v-model="item.printId"
clearable
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(v,i) in temList[item.moduleType]"
:key="i"
:label="v.moduleName"
:value="v.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
</div>
</el-row >其他情况
1.百分比宽度/高度：如果使用的是百分比宽度或高度，并且这些百分比是基于某个父元素的，那么当父元素的大小改变时（例如页面缩放），子元素的大小也会相应改变。但如果计算不当或存在其他布局问题，也可能导致空行的出现。
2.浮动与清除：使用浮动布局时，如果没有正确清除浮动，可能会导致布局问题。空行可能是由于浮动元素未能正确占据其应有的空间或位置。
3.外边距/内边距重叠：CSS中的外边距（margin）和内边距（padding）可能会在某些情况下重叠，导致看似有空行但实际上是由 内外边距 重叠导致的 布局异常。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue Router路由无法跳转问题汇总,在这里我整理了部分Vue Router路由无法跳转问题,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-09-09
使用Element-UI的NavMenu如何隐藏自带的小箭头
这篇文章主要介绍了使用Element-UI的NavMenu如何隐藏自带的小箭头问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
vscode根据eslint保存⾃动修复配置,下面这篇文章主要给大家介绍了关于vscode中eslint配置保存自动修复代码的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
小编最近遇到这样的需求，当点击一个按钮可以变换里面字的内容，刚开始还真是一头雾水，不知所措。仔细想想屡屡思绪，很容易的解决了。接下来通过本文给大家介绍elementUI Vue 单个按钮显示和隐藏的变换功能,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了使用vxe-table合并单元格、分组列头的详细用法,vxe-table通过rowspan和colspan配置合并单元格,使用columns的group属性实现列头分组,文中给出了详细的代码示例,需要的朋友可以参考下2025-06-06
el-table表头使用el-dropdown出现两个下拉框的问题及解决方法
本文给大家分享el-table在固定右边列时,表头使用el-dropdown会出现两个下拉框的解决方法,感兴趣的朋友跟随小编一起看看吧2024-07-07
本篇文章主要介绍了vue-router：嵌套路由的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
本文介绍了如何使用Vite快速搭建Vue项目,强调Vite对Node.js版本有最低要求（>=12.0.0）,提供了环境准备、安装步骤和启动指南,旨在帮助开发者高效启动Vue项目2024-10-10
VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token &apo
这篇文章主要介绍了VUE3刷新页面报错：Uncaught SyntaxError: Unexpected token ‘＜‘,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue $event作为参数传递使用demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论