当前位置: 首页 > news >正文

vue elementui layout布局组件实现规则的弹性布局

背景:遇到在一个容器里,采用弹性盒布局的时候,如果元素个数改变,元素的排列会错乱。
解决方式
方式一:之前遇到的时候,是采用计算元素个数的方式,采用透明元素补齐的方式(比如一个有5个元素,上一行3个正常布局,剩下的2个在下一行是错乱的布局,少一个元素,凑成3个 ,改用透明的方式,就能规则排列)。
方式二:看了同事的解决方法
项目采用的是vue结合elementui的方式,利用layout布局组件完成,这个组件可以有响应式:参照了 Bootstrap 的 响应式设计,预设了五个响应尺寸:xs、sm、md、lg 和 xl。

<el-row :gutter="10"><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple-light"></div></el-col><el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></el-col><el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

我项目里的是

        <el-row><el-col:key="tag"v-for="tag in dynamicTags"class="tagcol":xs="24":sm="12":md="8":lg="8":xl="6"><el-tagtype="info"closable:disable-transitions="false"@close="handleClose(tag)">{{ tag }}</el-tag></el-col></el-row>

表示:该容器里,元素每一列按照屏幕大小改变而占据的宽度不同。意味着,最小的时候,列占完,即只展示一个元素,最大的时候,占用6份,即显示4个元素(一行为24份)。

相关文章:

vue elementui layout布局组件实现规则的弹性布局

背景&#xff1a;遇到在一个容器里&#xff0c;采用弹性盒布局的时候&#xff0c;如果元素个数改变&#xff0c;元素的排列会错乱。 解决方式 方式一&#xff1a;之前遇到的时候&#xff0c;是采用计算元素个数的方式&#xff0c;采用透明元素补齐的方式&#xff08;比如一个有…...

SpringBoot Web 开发请求参数

SpringBoot Web 开发请求参数 简单的 web 请求: @RestController public class HelloController {@RequestMapping("sayHello")public String sayHello(){System.out.println("Hello World");return "hello world";} }获取请求参数 简单参数…...

python7学习笔记-循环、迭代、pass

九九乘法表-while循环 right 1 while right < 9:left 1while left < right:print(f{left}x{right}{left * right},end\t)left 1print()right 1 # #效果&#xff1a; #1x11 #1x22 2x24 #1x33 2x36 3x39 #1x44 2x48 3x412 4x416 #1x55 2x510 3x515 4x520 5x525 #…...

LeetCode78:子集

链接&#xff1a;78. 子集 假设我们要求[1, 2, 3]的子集&#xff1a; 我们知道[1, 2]的子集是A&#xff1a; 而[1, 2, 3]就是比[1, 2]多了一个元素3&#xff1b;所以将3加入到上述A中的每个集合中&#xff0c;得到一个新集合B&#xff1a; 结论&#xff1a;[1, 2, 3]的子集就…...

Linux 安装scala

文章目录 Linux 安装scala下载环境变量配置 Linux 安装scala 前提linux需要已经安装好JDK&#xff08;JDK安装&#xff09;&#xff0c;Scala对JDK版本有明确的要求。通常&#xff0c;Scala的稳定版本要求JDK版本不低于1.8。例如&#xff0c;Scala 2.11.8和2.12.7版本都要求JD…...

重生之我在异世界学编程之C语言:深入指针篇(上)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文&#xff08;1&#xff09;内置数…...

linux centos7 yum命令失效

linux centos7 yum命令失效 Centos7使用yum命令失效&#xff0c;报错&#xff1a;Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infrastock error was 14: curl#6 - “Could not resolve host: mirrorlist.centos.or…...

mac访达打开终端

选择文件夹打开 选中文件夹&#xff0c;然后右键即可&#xff1a; 在当前文件夹打开 在访达的当前文件夹长按option键 左下角出现当前文件夹路径 右键即可打开终端...

【MySQL 进阶之路】索引的使用

5.索引的使用规则 在数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;索引是提高查询效率的关键机制之一。MySQL索引优化是指通过设计、调整和选择合适的索引策略&#xff0c;以提高数据库的查询性能和降低资源消耗。以下是一些关键的索引使用规则&#xff1a; 1. …...

网络编程相关 API 学习

目录 1. 网络编程中的基本概念 2. UDP 的 socket api 的使用 (1) DatagramSocket API (2) DatagramPacket API (3) InetSocketAddress API (4) 使用 UDP 的 socket api 3. TCP 的 socket api 的使用 (1) ServerSocket API (2) Socket API 1. 网络编程中的基本概念 客…...

python使用python-docx处理word

文章目录 一、python-docx简介二、基本使用1、新建与保存word2、写入Word&#xff08;1&#xff09;打开文档&#xff08;2&#xff09;添加标题&#xff08;3&#xff09;添加段落&#xff08;4&#xff09;添加文字块&#xff08;5&#xff09;添加图片&#xff08;6&#xf…...

【笔记2-1】ESP32:基于vscode的espidf插件的开发环境搭建

主要参考b站宸芯IOT老师的视频&#xff0c;记录自己的笔记&#xff0c;老师讲的主要是linux环境&#xff0c;但配置过程实在太多问题&#xff0c;就直接用windows环境了&#xff0c;老师也有讲一些windows的操作&#xff0c;只要代码会写&#xff0c;操作都还好&#xff0c;开发…...

集成网关 -- 新节点的开发说明

在node-red中&#xff0c;nVisual节点可以帮助我们更快快简捷的完成新的功能&#xff0c;今天我来分享一下关于node-Red中关于nVisual新节点开发基础教程。 首先来看一下基本node-red节点文件目录&#xff0c;当前新开发的7个节点都放在了“node-red\packages\node_modulesno…...

【Gitlab】CICD使用minio作为分布式缓存

1、安装minio 下载适合自己系统版本的安装文件https://dl.min.io/server/minio/release/windows-amd64/ yum install xxx.rpm 2、配置/etc/profile export MINIO_ACCESS_KEYroot [ui登录账号] export MINIO_SECRET_KEYminioDev001 [ui登录密码] export MINIO_OPTS"…...

️️耗时一周,肝了一个超丝滑的卡盒小程序

前言 先看看成品效果&#xff1a; 在上个月&#xff0c;我出于提升自己的英语造句能力的目的&#xff0c;想要找一个阅读或者练习造句类的英语学习 APP&#xff0c;但是最终找了几个 APP 不是不太好用就是要付费。于是我转换思路&#xff0c;找到了一本书&#xff0c;叫《36…...

网络安全审计

网络安全审计是为了确保网络系统的安全性和完整性&#xff0c;防范潜在的网络攻击和数据泄露风险。 审计步骤&#xff1a; 1.确定审计目标&#xff1a;明确审计的目的和范围&#xff0c;例如审计网络设备、服务器、应用程序或数据库等。 2.收集信息&#xff1a;收集审计范围…...

论文:IoU Loss for 2D/3D Object Detection

摘要&#xff1a;在2D/3D目标检测任务中&#xff0c;IoU (Intersection-over- Union)作为一种评价指标&#xff0c;被广泛用于评价不同探测器在测试阶段的性能。然而&#xff0c;在训练阶段&#xff0c;通常采用常见的距离损失(如L1或L2)作为损失函数&#xff0c;以最小化预测值…...

2411mfc,修改按钮颜色

添加消息:ON_WM_CTLCOLOR() //在OnInitDialog()方法中添加{HWND hSatateWnd GetDlgItem(IDC_CHK)->GetSafeHwnd();SetWindowTheme(hSatateWnd, _T(""), _T(""));}头文件中: afx_msg HBRUSH OnCtlColor(CDC* pDC, CWnd* pWnd, UINT nCtlColor);HBRUSH O…...

互联网 Java 面试八股文汇总(2025 最新整理)

我分享的这份 Java 后端开发面试总结包含了 JavaOOP、Java 集合容器、Java 异常、并发编程、Java 反射、Java 序列化、JVM、Redis、Spring MVC、MyBatis、MySQL 数据库、消息中间件 MQ、Dubbo、Linux、ZooKeeper、 分布式 &数据结构与算法等 25 个专题技术点&#xff0c;都…...

如何在 Ubuntu 中更新 Linux 内核

Linux内核是操作系统的基础&#xff0c;对操作系统的性能起着至关重要的作用。Linux开发人员通过补丁和更新不断增强内核&#xff0c;解决安全性、功能性和速度问题。及时了解这些发展对于确保机器以最佳方式运行至关重要。 本文教您如何使用三种不同的方法更新 Ubuntu 中的 L…...

复旦微FM33单片机GPIO的“高级”玩法:用FL库实现软件PWM、按键扫描和LED流水灯

复旦微FM33单片机GPIO的“高级”玩法&#xff1a;用FL库实现软件PWM、按键扫描和LED流水灯 在嵌入式开发中&#xff0c;GPIO&#xff08;通用输入输出&#xff09;是最基础也是最常用的外设之一。对于复旦微FM33系列单片机来说&#xff0c;除了基本的电平控制&#xff0c;通过巧…...

nlp_structbert_sentence-similarity_chinese-large 与传统方法对比:TF-IDF、Word2Vec与深度语义模型

nlp_structbert_sentence-similarity_chinese-large 与传统方法对比&#xff1a;TF-IDF、Word2Vec与深度语义模型 1. 引言 在中文文本处理的世界里&#xff0c;判断两句话是不是一个意思&#xff0c;一直是个挺有意思的挑战。比如&#xff0c;“今天天气真好”和“今日阳光明…...

用Python+NumPy手把手实现四足机器人腿部三维运动学(附完整代码与避坑点)

用PythonNumPy手把手实现四足机器人腿部三维运动学&#xff08;附完整代码与避坑点&#xff09; 四足机器人的运动控制一直是机器人学中最具挑战性的领域之一。想象一下&#xff0c;当你看到一只机械狗灵活地穿越复杂地形时&#xff0c;背后其实是数百行精密的运动学代码在实时…...

AI人工神经网络核心原理与深度学习机制解析

AI人工神经网络核心原理与深度学习机制解析...

FinalBurn Neo:让经典街机游戏在现代设备上完美重生

FinalBurn Neo&#xff1a;让经典街机游戏在现代设备上完美重生 【免费下载链接】FBNeo FinalBurn Neo - We are Team FBNeo. 项目地址: https://gitcode.com/gh_mirrors/fb/FBNeo FinalBurn Neo是一款专注于经典街机游戏的开源模拟器&#xff0c;它基于FinalBurn和早期…...

AI 模型推理延迟优化方案

AI模型推理延迟优化方案&#xff1a;提升效率的关键路径 在人工智能技术快速发展的今天&#xff0c;AI模型的推理延迟已成为影响用户体验和系统性能的关键因素。无论是实时语音识别、自动驾驶&#xff0c;还是在线推荐系统&#xff0c;高延迟都会导致响应缓慢&#xff0c;甚至…...

AI 模型压缩与推理加速

AI模型压缩与推理加速&#xff1a;让智能更高效 近年来&#xff0c;人工智能技术飞速发展&#xff0c;深度学习模型在图像识别、自然语言处理等领域取得了显著成果。随着模型规模的不断扩大&#xff0c;计算资源和存储需求也急剧增加&#xff0c;导致模型在部署时面临效率低、…...

数据仓库实战:数据分层设计全面解析——如何大幅提升数据可用性与性能

数据仓库实战&#xff1a;数据分层设计全面解析——如何大幅提升数据可用性与性能摘要一、基础认知&#xff1a;数据仓库为什么必须做数据分层&#xff1f;1.1 核心定义1.2 不做分层的严重问题1.3 数据分层核心目标二、标准架构&#xff1a;数据仓库经典 5 层设计&#xff08;企…...

如何通过AI技术让千年中医智慧赋能现代诊疗?仲景中医大语言模型的创新实践

如何通过AI技术让千年中医智慧赋能现代诊疗&#xff1f;仲景中医大语言模型的创新实践 【免费下载链接】CMLM-ZhongJing 首个中医大语言模型——“仲景”。受古代中医学巨匠张仲景深邃智慧启迪&#xff0c;专为传统中医领域打造的预训练大语言模型。 The first-ever Traditiona…...

豆包导出的Excel公式失效

豆包导出的Excel公式为何失效&#xff1f;结构化分析与实用解决方案 在AI辅助办公场景中&#xff0c;豆包&#xff08;Doubao&#xff09;凭借数据分析模块成为不少职场用户的选择。用户通过自然语言指令生成销售报表、预算模板或统计表格后&#xff0c;期待直接导出可用的.xls…...