使用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-selectv-model="item.printId"clearableplaceholder="请选择"style="width: 100%"><el-optionv-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-selectv-model="item.printId"clearableplaceholder="请选择"style="width: 100%"><el-optionv-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 >
其他情况:
- 百分比宽度/高度:如果使用的是百分比宽度或高度,并且这些百分比是基于某个父元素的,那么当父元素的大小改变时(例如页面缩放),子元素的大小也会相应改变。但如果计算不当或存在其他布局问题,也可能导致空行的出现。
- 浮动与清除:使用浮动布局时,如果没有正确清除浮动,可能会导致布局问题。空行可能是由于浮动元素未能正确占据其应有的空间或位置。
- 外边距/内边距重叠:CSS中的外边距(margin)和内边距(padding)可能会在某些情况下重叠,导致看似有空行但实际上是由 内外边距 重叠导致的 布局异常。
相关文章:
使用el-row及el-col页面缩放时出现空行解决方案
问题: 当缩放到90%或者110%,选中下拉后,下方就会出现空行 如下图所示: 关于el-row 和 el-col : 参数说明类型可选值默认值span栅格占据的列数number—24offset栅格左侧的间隔格数number—0push栅格向右移动格数number…...
java中几种对象存储(文件存储)中间件的介绍
一、前言 在博主得到系统中使用的对象存储主要有OSS(阿里云的对象存储) COS(腾讯云的对象存储)OBS(华为云的对象存储)还有就是MinIO 这些玩意。其实这种东西大差不差,几乎实现方式都是一样&…...
网络工程师——2024自学
一、怎样从零开始学习网络工程师 当今社会,人人离不开网络。整个IT互联网行业,最好入门的,网络工程师算是一个了。 什么是网络工程师呢,简单来说,就是互联网从设计、建设到运行和维护,都需要网络工程师来…...
SwiftUI的Picker
SwiftUI的Picker 本章来记录一下SwiftUI中三种不同Picker的用法 ,分别为normalPicker , wheelPicker, segmentedPicker 。可以根据不同需求展示不同的Picker import SwiftUIstruct PickerBootCamp: View {State var selection: String &quo…...
物联网技术助力智慧城市转型升级:智能、高效、可持续
目录 一、物联网技术概述及其在智慧城市中的应用 二、物联网技术助力智慧城市转型升级的路径 1、提升城市基础设施智能化水平 2、推动公共服务智能化升级 3、促进城市治理现代化 三、物联网技术助力智慧城市转型升级的成效与展望 1、成效显著 2、展望未来 四、物联网技…...
YOLOv7_pose-Openvino和ONNXRuntime推理【CPU】
纯检测系列: YOLOv5-Openvino和ONNXRuntime推理【CPU】 YOLOv6-Openvino和ONNXRuntime推理【CPU】 YOLOv8-Openvino和ONNXRuntime推理【CPU】 YOLOv7-Openvino和ONNXRuntime推理【CPU】 YOLOv9-Openvino和ONNXRuntime推理【CPU】 跟踪系列: YOLOv5/6/7-O…...
通过ACPI检测沙箱-反虚拟机
ACPI & ACPI table ACPI 表示高级配置和电源管理接口(Advanced Configuration and Power Management Interface),对于Windows2000,ACPI定义了Windows2000、BIOS和系统硬件之间的新型工作接口。这些新接口包括允许Windows 200…...
计算点集的最小外接矩形——OpenCV的minAreaRect函数
计算点集的最小外接矩形——OpenCV的minAreaRect函数 函数原型 输入一系列二维点,返回其最小外接矩形。 RotatedRect minAreaRect( InputArray points );根据函数原型,输入的数据可以是vector<Point>类型,包含1个以上的点࿱…...
Stripe Web 购买集成
图片被吞了可以来这里看:https://juejin.cn/post/7346388511338381364 1. 准备事项 Stripe 账号域名以及配套的网站Stripe 账号付款信息公钥和私钥 2. 配置产品以及价格 可以通过 API 或者 Stripe 管理后台来进行配置 产品:就是商品,只需…...
加密货币在网络违法犯罪活动中的利用情况调查
一、调查背景 区块链基于分布式共识和经济激励等手段,在开放式、无许可的网络空间中,为价值的确立、存储、转移提供了新的解决方案。然而随着加密生态在过去若干年的快速发展,加密货币也越来越多地被用于各类风险活动,为网络赌博…...
【测试知识】业务面试问答突击版3---bug、测试用例设计
文章目录 一个完整的缺陷报告包含一个完整的测试用例包含一个完整的测试计划包含缺陷严重等级简述等价类划分法并举例简述边界值分析法逻辑覆盖针对具体场景的测试用例设计软件中存在多个分支时如何设计测试用例静态代码检查什么白盒测试是?常用方法是? …...
使用大型语言模型进行实体提取
原文地址:Using A Large Language Model For Entity Extraction LLM 能否比传统 NLP 方法更好地提取实体? 2022 年 7 月 12 日 Large Language Models for Generative Information Extraction: A Survey 实体简介 使用Co:here大型语言模型。 实体可以被视…...
基础:TCP是什么?
1. TCP 是什么? TCP(Transmission Control Protocol 传输控制协议) 是一种面向连接的、可靠的、基于字节流的传输层通信协议,由IETF的RFC 793 [1]定义。 TCP旨在适应支持多网络应用的分层协议层次结构。连接到不同但互连的计算机…...
el-table中 el-popover 性能优化
场景:在 el-table 中使用 el-popover ,出现了 loading 加载卡顿的问题,接口返回的数据的时间大概是 140ms ,所以不是接口慢的原因;通过对表中结构的逐步排查,发现是表中的 某一行 所影响的;并且 其中含有 e…...
java数据结构与算法刷题-----LeetCode46. 全排列
java数据结构与算法刷题目录(剑指Offer、LeetCode、ACM)-----主目录-----持续更新(进不去说明我没写完):https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 暴力回溯2. 分区法回溯 1. 暴力回溯 解题思路:时…...
听说过Nginx反向代理,那正向代理是什么?
Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,它以其高性能、稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。在 Nginx 中,正向代理和反向代理是两种常见的代理配置方式,它…...
实现elasticsearch和数据库的数据同步
1. 数据同步 elasticsearch中的酒店数据来自于mysql数据库,因此mysql数据发生改变时,elasticsearch也必须跟着改变,这个就是elasticsearch与mysql之间的数据同步。 1.1. 思路分析 常见的数据同步方案有三种: 同步调用 异步通知…...
SwiftUI的Alert使用方式
SwiftUI的Alert使用方式 记录一下SwiftUI的Alert使用方式,比较简单直接上代码 import SwiftUIstruct AlertBootCamp: View {State var showAlert falsevar body: some View {Button {showAlert.toggle()} label: {Text("alert show")}/// 单按钮 // …...
FPGA高端项目:FPGA基于GS2971的SDI视频接收+GTX 8b/10b编解码SFP光口传输,提供2套工程源码和技术支持
目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI接收图像缩放应用本方案的SDI接收纯verilog图像缩放纯verilog多路视频拼接应用本方案的SDI接收HLS图像缩放Video Mixer多路视频拼接应用本方案的SDI接收OSD动态字符叠加…...
【源码编译】Apache SeaTunnel-Web 适配最新2.3.4版本教程
Apache SeaTunnel新版本已经发布,感兴趣的小伙伴可以看之前版本发布的文章 本文主要给大家介绍为使用2.3.4版本的新特性,需要对Apache SeaTunnel-Web依赖的版本进行升级,而SeaTunnel2.3.4版本部分API跟之前版本不兼容,所以需要对 …...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建: 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建: File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
ubuntu22.04有线网络无法连接,图标也没了
今天突然无法有线网络无法连接任何设备,并且图标都没了 错误案例 往上一顿搜索,试了很多博客都不行,比如 Ubuntu22.04右上角网络图标消失 最后解决的办法 下载网卡驱动,重新安装 操作步骤 查看自己网卡的型号 lspci | gre…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...
热门Chrome扩展程序存在明文传输风险,用户隐私安全受威胁
赛门铁克威胁猎手团队最新报告披露,数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据,严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能,但SEMR…...
Linux操作系统共享Windows操作系统的文件
目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项,设置文件夹共享为总是启用,点击添加,可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download(这是我共享的文件夹)&…...
论文笔记:Large Language Models for Next Point-of-Interest Recommendation
SIGIR 2024 1 intro 传统的基于数值的POI推荐方法在处理上下文信息时存在两个主要限制 需要将异构的LBSN数据转换为数字,这可能导致上下文信息的固有含义丢失仅依赖于统计和人为设计来理解上下文信息,缺乏对上下文信息提供的语义概念的理解 ——>使用…...
