使用el-row及el-col页面缩放时出现空行解决方案

问题:

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

如下图所示:

关于el-rowel-col

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

el-rowel-col 应该配合使用,并且 el-col 应该包含在 el-row 中。

同时,检查 el-colspan 属性或者offset属性是否设置正确,它决定了列在栅格系统中的宽度占比。

如果为 rowcol 设置了固定的宽度或高度,当页面缩放时,这些固定尺寸的元素可能无法适应新的容器大小,从而导致布局问题或空行出现。

代码如下:

javascript 复制代码
<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>

解决方案:

使用弹性盒子,自动换行即可

javascript 复制代码
display: flex;
flex-wrap: wrap;

完整代码如下:

javascript 复制代码
<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)可能会在某些情况下重叠,导致看似有空行但实际上是由 内外边距 重叠导致的 布局异常。
相关推荐
AAA阿giao19 小时前
JavaScript 中的变量声明:var、let 与 const 深度解析
javascript·笔记
Mintopia20 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc
用户66006766853920 小时前
从 var 到 let/const:JavaScript 变量声明的进化之路
javascript
十年_H20 小时前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
UIUV21 小时前
var、let 与 const:JavaScript 变量声明的演进与最佳实践
javascript
阿珊和她的猫1 天前
深入剖析 Vue Router History 路由刷新页面 404 问题:原因与解决之道
前端·javascript·vue.js
@AfeiyuO1 天前
el-table 表格嵌套表格
前端·elementui·vue
麦麦大数据1 天前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区1 天前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
小光学长1 天前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js