首页 > 其他分享 >ElementUI中使用<el-row>自适应布局导致显示错乱

ElementUI中使用<el-row>自适应布局导致显示错乱

时间:2023-08-21 13:57:48浏览次数:40  
标签:el ElementUI 布局 wrap 错乱 row

 

错乱代码(部分):

<el-row :gutter="5">
  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> 
    <img :src="baseUrl + item.busCaseImage" :alt="item.busCaseDesc" style="width: 100px;height: auto;max-width: 100%; max-height: 100%">
  </el-col>
</el-row> 

经研究查询:将el-col全部放到el-row中,可能会出现分辨率或缩放、内容不同导致el-col高度不一致,而使布局异常。

解决方案:el-row添加flex布局,设置flex-wrap:wrap即可。

修改后的代码:

<el-row :gutter="5" type="flex" style="flex-wrap:wrap">
  <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="(item, index) in caseList" :key="index"> 
    <img :src="baseUrl + item.busCaseImage" :alt="item.busCaseDesc" style="width: 100px;height: auto;max-width: 100%; max-height: 100%">
  </el-col>
</el-row> 

标签:el,ElementUI,布局,wrap,错乱,row
From: https://www.cnblogs.com/ayuaichiyu/p/17645795.html

相关文章

  • DPDK-22.11.2 [三] 官方helloworld编译运行讲解
    先安装dpdk编译完成后,先运行ninjainstall把相关内容安装到指定目录。ls/home/dpdkinstallbinincludelib64sharebin——一些脚本(用于绑定驱动等),编译的测试程序,编译的常用工具include——需要的头文件lib64——编译的类库share——文档相关......
  • 杭电ACM HDU 3351 Seinfeld
    SeinfeldTimeLimit:2000/1000MS(Java/Others)   MemoryLimit:32768/32768K(Java/Others)TotalSubmission(s):1071   AcceptedSubmission(s):540ProblemDescriptionI’moutofstories.ForyearsI’vebeenwritingstories,somerathersilly,......
  • java 中使用导入 导出 excel文件( Easy Excel 2.x )
    前提是依赖必须导入:<dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.0-beta2</version></dependency> 导出首先在自己的接口中创建一个方法为导出的方法:/***数据导出......
  • NineData x SelectDB完成产品兼容互认证
    近日,新一代实时数据仓库厂商SelectDB与云原生智能数据管理平台NineData完成产品兼容互认证。经过严格的联合测试,双方软件完全相互兼容、功能完善、整体运行稳定且性能表现优异。基于本次的合作,双方将进一步为数据管理与大数据分析业务的融合持续助力,帮助企业实现数字化转型,提......
  • KIOPTRIX: LEVEL 1.1 (#2) 常规命令注入+内核提权
    0×02Vulnhub靶机渗透总结之KIOPTRIX:LEVEL1.1(#2)......
  • element ui
      varurl=window.location.href;    console.log(url);    varaa=url.indexOf("=");    if(aa==-1)    return"";    url=url.substring(aa+1);    window.alert(url); ......
  • shell快捷键
    第一部分:一般命令模式可用的功能按键说明,光标移动、复制粘贴、查找替换等移动光标的方法h或向左箭头键(←):光标向左移动一个字符j或向下箭头键(↓):光标向下移动一个字符k或向上箭头键(↑):光标向上移动一个字符l或向右箭头键(→):光标向右移动-一个字符[CtrI]+[f]:屏......
  • SpringBoot整合swagger+MP+PageHelper
    1.SpringBoot整swagger接口文档【接口文档的作用:就是为了方便前后端的交互】1.1swagger依赖  <!--引入swagger2依赖-->    <dependency>      <groupId>com.spring4all</groupId>      <artifactId>swagger-spring-boot-starter</arti......
  • element-plus使用中文
    element-plus默认是英文,要显示中文需要安装中文包1.ElementPlus提供了全局配置国际化的配置。importElementPlusfrom'element-plus'importzhCnfrom'element-plus/es/locale/lang/zh-cn'app.use(ElementPlus,{locale:zhCn})2.ElementPlus还提供了一个Vue组......
  • 使用redis pipeline提升性能
    前言本篇来介绍一下redispipeline,主要是由于最近一次在帮开发同学review代码的时候,发现对redis有个循环操作可以优化。场景大概是这样的,根据某个uid要从redis查询一批数据,每次大概1000个key左右,如果查得到就返回,否则查db,然后写回缓存。由于每次要查的key比较多,虽然redis单次查询......