使用el-row及el-col页面缩放时出现空行的问题及解决

 更新时间:2024年03月19日 08:52:41   作者:じòぴé南冸じょうげん  
这篇文章主要介绍了使用el-row及el-col页面缩放时出现空行的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

问题

当缩放到90%或者110%,选中下拉后,下方就会出现空行

如下图所示:

关于el-row 和 el-col 

参数说明类型可选值默认值
span栅格占据的列数number24
offset栅格左侧的间隔格数number0
push栅格向右移动格数number0
pull栅格向左移动格数number0

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递归树形实现多级列表

    VUE递归树形实现多级列表

    这篇文章主要为大家详细介绍了VUE递归树形实现多级列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Vuex简单入门

    Vuex简单入门

    本篇文章主要介绍了初步认识理解Vuex,Vuex就是在一个项目中,提供唯一的管理数据源的仓库,有兴趣的可以了解一下
    2017-04-04
  • elementPlus中的Autocomplete弹出层错位问题解决分析

    elementPlus中的Autocomplete弹出层错位问题解决分析

    这篇文章主要介绍了elementPlus中的Autocomplete弹出层错位问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • vue3的基本使用方法详细教程

    vue3的基本使用方法详细教程

    这篇文章主要介绍了vue3的基本使用方法,结合实例形式详细分析了vue3功能、组件、生命周期、TypeScript结合运用等相关概念与使用方法,需要的朋友可以参考下
    2023-06-06
  • vite项目如何从0开始配置eslint

    vite项目如何从0开始配置eslint

    这篇文章主要介绍了vite项目如何从0开始配置eslint问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 深入浅出vue图片路径的实现

    深入浅出vue图片路径的实现

    这篇文章主要介绍了深入浅出vue图片路径的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • vue.js路由mode配置之去掉url上默认的#方法

    vue.js路由mode配置之去掉url上默认的#方法

    今天小编就为大家分享一篇vue.js路由mode配置之去掉url上默认的#方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 利用Vue实现数字翻滚动画效果展示

    利用Vue实现数字翻滚动画效果展示

    这篇文章主要介绍了利用Vue实现数字翻滚动画效果,通过Vue的响应式数据更新结合CSS3的动画效果,我们可以实现非常酷炫的数字翻滚效果,给数据可视化带来更多动感和吸引力,需要的朋友参考下吧
    2024-04-04
  • Vue实战之项目开发时常见的几个错误汇总

    Vue实战之项目开发时常见的几个错误汇总

    vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • vue离开页面时如何销毁定时器

    vue离开页面时如何销毁定时器

    这篇文章主要介绍了vue离开页面时如何销毁定时器,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论