使用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-cli创建项目从单页面到多页面的方法
本篇文章主要介绍了Vue-cli创建项目从单页面到多页面的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
详解为element-ui的Select和Cascader添加弹层底部操作按钮
这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-02-02
Vue中iframe 结合 window.postMessage 实现跨域通信
window.postMessage() 方法可以安全地实现跨源通信，在一个项目的页面中嵌入另一个项目的页面，需要实现父子，子父页面的通信，对Vue中iframe 结合 window.postMessage 实现跨域通信相关知识感兴趣的朋友跟随小编一起看看吧
2022-12-12
vue项目或网页上实现文字转换成语音播放功能
这篇文章主要介绍了在vue项目或网页上实现文字转换成语音,需要的朋友可以参考下
2020-06-06
Sublime Text新建.vue模板并高亮(图文教程)
这篇文章主要介绍了Sublime Text新建.vue模板并高亮(图文教程)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
VUE在线调用阿里Iconfont图标库的方法
这篇文章主要介绍了VUE在线调用阿里Iconfont图标库的方法,内容是围绕VUE前端和阿里Iconfont图标库展开的，经历了从网站上东拼西凑图标的时代，大概是15~16年左右我开始解除阿里Iconfont图标库，刚开始就只会下载图标使用，需要的朋友可以参考下
2021-10-10
vue-devtools快速安装过程
vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率，这篇文章主要介绍了vue-devtools的安装,需要的朋友可以参考下
2023-08-08
vue3中的:deep()深度选择器详解
本文讲述了"v-deep"深度选择器被废弃的情况,作者提醒读者更新知识库,避免误导他人,深度选择器是HTML5的新属性,用于实现组件私有化和防止样式污染,如果想让样式中的一个选择器作用得更深,可以使用深度选择器,但现在,以前的写法已不再支持,需要调整方法
2024-10-10
Vue路由传参及props解耦深入分析
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于vue路由传参方式的方式总结及获取参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
vue-element-admin搭建后台管理系统的实现步骤
本文主要介绍了vue-element-admin搭建后台管理系统的实现步骤，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10