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

ElementUI 布局——行与列的灵活运用

ElementUI 布局——行与列的灵活运用

  • 一 . 使用 Layout 组件
    • 1.1 注册路由
    • 1.2 使用 Layout 组件
  • 二 . 行属性
    • 2.1 栅格的间隔
    • 2.2 自定义元素标签
  • 三 . 列属性
    • 3.1 列的偏移
    • 3.2 列的移动

在现代网页设计中,布局是构建用户界面的基石。Element UI 框架通过其强大的 <el-row><el-col> 组件,提供了一种灵活且高效的方式来实现响应式布局。本文将带您深入了解如何使用 Element UI 的布局组件,从基础的行和列创建,到栅格间隔、偏移和移动的高级配置,一步步教您如何利用这些工具快速搭建出专业且富有弹性的网页布局。

通过本文,您将学习到如何通过简单的属性设置,控制布局的显示和响应式行为,以及如何通过组合使用不同的布局属性来实现复杂的页面结构。

在这里插入图片描述

ElementUI 专栏 : https://blog.csdn.net/m0_53117341/category_12780595.html

Layout 布局组件主要是为了让我们快速构建出页面的整体框架 .

在 ElementUI 中 , 布局组件将页面划分成了多个行 , 每行最多分为 24 列 .

通过基础的 24 分栏 , 可以迅速简便地创建布局 .

一 . 使用 Layout 组件

我们先来看官网提供给我们的 Layout 布局 : https://element.eleme.cn/#/zh-CN/component/layout

我们通过这段代码 , 可以得到

  1. 首先我们需要创建行 :
  2. 然后在每一行中 , 需要创建对应的列 : , 可以通过 span 属性指定占多少列

比如 :

<!-- 通过 el-row 标签创建一行 -->
<el-row><!--通过 el-col 标签创建列, 通过 span 属性设置占多少列--><el-col :span="8">占用 8 份</el-col><el-col :span="4">占用 4 份</el-col><el-col :span="2">占用 2 份</el-col>
</el-row>

注意 : span 属性也需要我们使用属性绑定的方式 , 即 v-bind:属性名=“对应的值” , v-bind 可省略

如果一行中超过了 24 份 , 会默认将多出的部分挪到下一行去展示

我们可以实验一下

1.1 注册路由

然后将 Layout 组件注册到路由中

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/Button'
import ButtonDetail from '@/components/ButtonDetail'
import Link from '@/components/Link'
import Layout from '@/components/Layout'Vue.use(Router)export default new Router({routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld },{ path: '/button', name: 'Button', component: Button },{ path: '/buttondetail', name: 'ButtonDetail', component: ButtonDetail },{ path: '/link', name: 'Link', component: Link },{ path: '/layout', name: 'Layout', component: Layout },]
})

最后将该组件添加到 App.vue 中

<template><div id="app"><!-- 我们自己的标签页 --><a href="#/button">点我显示 Button</a> <br><!-- URL 必须是 #/ 开头 --><a href="#/buttondetail">点我学习按钮的具体用法</a> <br><a href="#/link">文字链接组件</a> <br><a href="#/layout">布局组件</a> <br><!-- Vue 的路由 --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

1.2 使用 Layout 组件

那接下来 , 我们就演示一下 Layout 组件的使用 .

我们刚才也介绍了 , 使用 el-row 标签设置每一行 , 使用 el-col 标签设置对应列 , 通过 span 属性设置列宽 (span 属性需要使用属性绑定的方式)

<template><div><h1>Layout 组件的使用</h1><!-- 使用 el-row 标签创建布局中的行 --><el-row><!-- 通过 el-col 标签创建对应的列 --><!-- span 属性用来设置对应列数, 需要使用属性注入的方式 --><el-col :span="6">占用 6 份</el-col><el-col :span="6">占用 6 份</el-col><el-col :span="6">占用 6 份</el-col><el-col :span="6">占用 6 份</el-col></el-row></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

但是这样看起来并不明显 , 我们可以添加一些样式

<template><div><h1>Layout 组件的使用</h1><!-- 使用 el-row 标签创建布局中的行 --><el-row><!-- 通过 el-col 标签创建对应的列 --><!-- span 属性用来设置对应列数, 需要使用属性注入的方式 --><el-col :span="6"><div style='border: 1px red solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px blue solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px green solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px purple solid;'>占用 6 份</div></el-col></el-row></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

另外需要注意的是 , 在一个布局组件中 , 是由 row 和 col 组合而成 , 在使用的时候就需要区分 row 的属性和 col 的属性 .

二 . 行属性

我们可以查看官方文档 : https://element.eleme.cn/#/zh-CN/component/layout

官方文档给出了一系列的行属性 (注意区分行属性与列属性)

2.1 栅格的间隔

我们可以设置不同栅格之间的间隙 , 使用 gutter 属性

如果需要设置数字的话 , 都需要使用属性绑定的方式 .

<template><div><h1>栅格之间的间隔</h1><!-- 通过 gutter 属性设置栅格之间的间隔, 需要使用属性绑定的方式 --><el-row :gutter="10"><!-- span 属性用来设置对应列数, 需要使用属性注入的方式 --><el-col :span="6"><div style='border: 1px red solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px blue solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px green solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px purple solid;'>占用 6 份</div></el-col></el-row></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

2.2 自定义元素标签

我们创建出来的布局 , 默认是 div 类型的

那我们就可以通过 tag 属性 , 设置成 span 类型的行内标签

<template><div><h1>设置成行内标签</h1><!-- 通过 tag 属性设置成 span 来实现将块级标签转为行内标签 --><el-row tag="span"><!-- span 属性用来设置对应列数, 需要使用属性注入的方式 --><el-col :span="6"><div style='border: 1px red solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px blue solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px green solid;'>占用 6 份</div></el-col><el-col :span="6"><div style='border: 1px purple solid;'>占用 6 份</div></el-col></el-row></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

三 . 列属性

Layout 标签也提供了许多的列属性

我们来看一下几个重要的属性

3.1 列的偏移

假如我们想让当前行只有一个元素 , 并且该元素处于居中状态 , 那该怎样解决呢 ?

我们能否创建一个空的 el-col 标签 , 然后设置 span 属性来去占位呢 ?

我们来看一下效果

这就需要我们注意了 , 只有当我们的标签中有值的情况下 , 占位才能起作用

所以我们的 offset 属性就是专门用来设置占位的

<template><div><h1>Layout 组件的偏移</h1><el-row><!-- 设置一个空的 el-col 用来占位 --><!-- 只有当我们的标签中有值的情况下 , 占位才能起作用 --><el-col :span="6">占位啦</el-col><el-col :span="12"><div style='border: 1px red solid;'>占用 12 份</div></el-col></el-row><br><el-row><!-- 使用 offset 属性来模拟占位的效果 --><el-col :span="12" :offset="4"><div style='border: 1px red solid;'>占用 12 份</div></el-col></el-row></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

3.2 列的移动

使用 push 属性也能达到 offset 的效果

我们来看一下效果

但是 layout 和 push 同时存在的话 , 会出现重叠的效果

<template><div><h1>Layout 组件的移动</h1><el-row><!-- 使用 push 属性向右移动 4 个单元格 --><el-col :span="12" :push="4"><div style='border: 1px red solid;'>占用 12 份</div></el-col></el-row><!-- 如果 offset 属性和 push 属性同时存在的话, 就会出现重叠的效果 --><el-row><!-- 使用 push 属性向右移动 4 个单元格 --><el-col :span="12" :push="4"><div style='border: 1px yellow solid;'>占用 12 份</div></el-col><!-- 使用 offset 属性来模拟占位的效果 --><el-col :span="6" :offset="1"><div style='border: 1px purple solid;'>占用 6 份</div></el-col></el-row></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>


小结 :
在本文中,我们深入探讨了 Element UI 框架的布局组件,特别是 <el-row><el-col> 标签的使用,这些是构建响应式网页布局的关键工具。通过详细的步骤和实例,我们学习了如何创建行和列,并通过 span 属性来分配空间。此外,我们还了解了如何通过 gutter 属性调整栅格间的间隔,使用 tag 属性自定义元素标签,以及利用 offset 和 push 属性对列进行有效偏移和移动。

如果对你有帮助的话 , 还请一键三连~
在这里插入图片描述

相关文章:

ElementUI 布局——行与列的灵活运用

ElementUI 布局——行与列的灵活运用 一 . 使用 Layout 组件1.1 注册路由1.2 使用 Layout 组件 二 . 行属性2.1 栅格的间隔2.2 自定义元素标签 三 . 列属性3.1 列的偏移3.2 列的移动 在现代网页设计中&#xff0c;布局是构建用户界面的基石。Element UI 框架通过其强大的 <e…...

Docker快速部署Apache Guacamole

Docker快速部署Apache Guacamole ,实现远程访问 git clone "https://github.com/boschkundendienst/guacamole-docker-compose.git" cd guacamole-docker-compose ./prepare.sh docker-compose up -dhttps://IP地址:8443/ 用户名:guacadmin 密码:guacadmin docker …...

C++学习笔记----7、使用类与对象获得高性能(一)---- 书写类(1)

1、表格处理程序示例 表格处理程序是一个二维的“细胞”网格&#xff0c;每个格子包含了一个数字或者字符串。专业的表格处理程序比如微软的Excel提供了执行数学运算的能力&#xff0c;比如计算格子中的值的和。表格处理程序示例无意挑战微软的市场地位&#xff0c;但是对于演示…...

es6中set和map的区别

在ES6&#xff08;ECMAScript 2015&#xff09;中&#xff0c;Set 和 Map 是两种新的集合类型&#xff0c;它们提供了更高级的数据结构来存储唯一值或键值对集合。尽管它们在功能上有些相似&#xff0c;但它们在用途和内部机制上存在一些关键区别。 1. 基本概念 Set&#xff1…...

高级实时通信:基于 Python 的 WebSocket 实现与异步推送解决方案

高级实时通信&#xff1a;基于 Python 的 WebSocket 实现与异步推送解决方案 目录 &#x1f7e2; WebSocket 协议概述&#x1f535; 在 FastAPI 中实现 WebSocket&#x1f7e3; Django Channels 实现异步实时通信&#x1f534; 使用 Redis 实现实时推送 &#x1f7e2; 1. WebS…...

大二上学期详细学习计划

本学习完成目标&#xff1a; 项目&#xff1a; 书籍&#xff1a;《mysql必知必会》《java核心技术卷》&#xff08;暂时&#xff09;加强JavaSE的学习&#xff0c;掌握Java核心Mysqlsql&#xff08;把牛客上的那50道sql语句题写完&#xff09;gitmaven完成springboot项目&…...

Kafka【十四】生产者发送消息时的消息分区策略

【1】分区策略 Kafka中Topic是对数据逻辑上的分类&#xff0c;而Partition才是数据真正存储的物理位置。所以在生产数据时&#xff0c;如果只是指定Topic的名称&#xff0c;其实Kafka是不知道将数据发送到哪一个Broker节点的。我们可以在构建数据传递Topic参数的同时&#xff…...

SQL优化:执行计划详细分析

视频讲解&#xff1a;SQL优化&#xff1a;SQL执行计划详细分析_哔哩哔哩_bilibili 1.1 执行计划详解 id select_type table partitions type possible_keys key key_len ref rows filtered Extra 1.1.1 ID 【概…...

Android Studio -> Android Studio 获取release模式和debug模式的APK

Android Studio上鼠标修改构建类型 Release版本 激活路径&#xff1a;More tool windows->Build Variants->Active Build Variant->releaseAPK路径&#xff1a;Project\app\build\intermediates\apk\app-release.apk Debug版本 激活路径&#xff1a;More tool w…...

基于 SpringBoot 的实习管理系统

专业团队&#xff0c;咨询送免费开题报告&#xff0c;大家可以来留言。 摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;实习管理也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越…...

vmware workstation 17 linux版

链接: https://pan.baidu.com/s/1F3kpNEi_2GZW0FHUO-8p-g?pwd6666 提取码: 6666 1 先安装虚拟机 不管什么错误 先安装vmware workstation 17 2 编译 覆盖安装vmware-host-modules-workstation-17.5.1 只需这样就可以 # sudo apt install dkms build-essential bc iw…...

Windows环境本地部署Oracle 19c及卸载实操手册

前言: 一直在做其他测试,貌似都忘了Windows环境oracle 19c的部署,这是一个很早很早的安装记录了,放上来做个备录给到大家参考。 Oracle 19c‌:进一步增强了自动化功能,并提供了更好的性能和安全性。这个版本在自动化、性能和安全性方面进行了重大改进,以满足现代企业对数…...

MapStruct介绍

一、MapStruct 1.1何为MapStruct 要说这个东西&#xff0c;其实和我们刚刚讲到的Lombok相类似。其是由我们的源代码加上MapStruct经过编译后得到.class文件&#xff0c;文件中自动补全了代码。那么补全了什么代码&#xff1f;实现了什么功能&#xff1f; MapStruct的产生&…...

35天学习小结

距离上次纪念日&#xff0c;已经过去了35天咯 算算也有5周了&#xff0c;在这一个月里&#xff0c;收获的也挺多&#xff0c;在这个过程中认识的大佬也是越来越多了hh 学到的东西&#xff0c;其实也没有很多&#xff0c;这个暑假多多少少还是有遗憾的~ 第一周 学习了一些有…...

【iOS】UIViewController的生命周期

UIViewController的生命周期 文章目录 UIViewController的生命周期前言UIViewController的一个结构UIViewController的函数的执行顺序运行代码viewWillAppear && viewDidAppear多个视图控制器跳转时的生命周期pushpresent 小结 前言 之前对于有关于UIViewControlller的…...

ELK在Linux服务器下使用docker快速部署(超详细)

ELK是什么&#xff1f; 首先说说什么是ELK ELK 是一个开源的日志管理和分析平台&#xff0c;由三个主要组件组成&#xff1a; Elasticsearch&#xff1a;一个分布式搜索和分析引擎&#xff0c;能够快速存储、搜索和分析大量数据。它是 ELK 堆栈的核心&#xff0c;负责数据的…...

unity导入半透明webm + AE合成半透明视频

有些webm的文件导入unity后无法正常播报&#xff0c;踩坑好久才知道需要webm中的&#xff1a;VP8 标准 现在手上有几条mp4双通道的视频&#xff0c;当然unity中有插件是可以支持这种视频的&#xff0c;为了省事和代码洁癖&#xff0c;毅然决然要webm走到黑。 mp4导入AE合成半透…...

力扣: 四数相加II

文章目录 需求代码结尾 需求 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < n nums1[i] nums2[j] nums3[k] nums4[l] 0 示例 1&#xff1a; 输入…...

径向基函数神经网络RBFNN案例实操

简介 (来自ChatGPT的介绍,如有更正建议请指出) 径向基函数神经网络(Radial Basis Function Neural Network, RBFNN)是一种特殊的前馈神经网络,其结构和特点与其他常见的神经网络有所不同,主要表现在以下几个方面: 网络结构三层结构:RBF神经网络通常由三层组成:输入层…...

Java-数据结构-二叉树-习题(一) (✪ω✪)

文本目录&#xff1a; ❄️一、习题一(检查两颗树是否相同)&#xff1a; ▶ 思路&#xff1a; ▶ 代码&#xff1a; ❄️二、习题二(另一棵树的子树)&#xff1a; ▶ 思路&#xff1a; ▶ 代码&#xff1a; ❄️三、习题三(翻转二叉树)&#xff1a; ▶ 思路&#xff1a; ▶ 代…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...