Vue 局部布局 Layout 内部布局 [el-row]、[el-col]

之前的布局容器是一个整体的框架,layout里面的布局其实就是el-row和el-col的组合。

 

基础布局


使用单一分栏创建基础的栅格布局。

通过 ​row ​和 ​col ​组件,并通过 ​col ​组件的 ​span ​属性我们就可以自由地组合布局。 

这种最简单,外面有一层row,说明四个col都在一行里面,也就是四列都在一行里面。

 

 

 

局部布局 [el-row]


el-row是控制一行一行的,el-col是控制一列一列的。span其实它会将整个浏览器作为24个格栅。如果每个都是6那么就排满了

外面有一层,其实是一个row,外面有一层row,其实是一行,这四个col(也就是四列)都在一行里面。 

每一列有个参数6,它会将整个浏览器的宽度作为24个格栅。如果大于24就排满了,就会另起一行。

 一个格栅是24个格子,:span="6"其实就是控制格栅占用的几个格子。gutter="20" 每个col之间的间距,间距为x px像素。

        <el-header style="flex:1"><el-row><el-col :span="24" style="background-color: yellow;">123</el-col></el-row><el-row :gutter="35"><el-col :span="6" style="background-color: red;">123</el-col><el-col :span="6" style="background-color: green;">123</el-col><el-col :span="6" style="background-color: blue;">123</el-col><el-col :span="6" style="background-color: burlywood;">123</el-col></el-row></el-header>

 如果超过24了,那么就另外启动一行来摆放。

        <el-header style="flex:1"><el-row><el-col :span="24" style="background-color: yellow;">123</el-col></el-row><el-row :gutter="15"><el-col :span="6" ><div style="background-color: red;">123</div></el-col><el-col :span="16"><div style="background-color: green;">123</div></el-col><el-col :span="1"><div style="background-color: blue;">123</div></el-col><el-col :span="1"><div style="background-color: burlywood;">123</div></el-col></el-row></el-header>

 offset是左侧的间隔格数

        <el-header style="flex:1"><el-row><el-col :span="24" style="background-color: yellow;">123</el-col></el-row><el-row :gutter="15"><el-col :offset="1" :span="6" ><div style="background-color: red;">123</div></el-col><el-col :span="16"><div style="background-color: green;">123</div></el-col><el-col :span="1"><div style="background-color: blue;">123</div></el-col><el-col :span="1"><div style="background-color: burlywood;">123</div></el-col></el-row></el-header>

 

下面el-col里面放置图标按钮,这里一个方法是控制它的折叠的。这里没有使用button去实现,而是使用了div去实现,div里面放了一个图标去实现类似按钮的东西。不是纯使用按钮去实现的,这样也是可以的。

很灵活,想怎么组合就可以怎么组合。这里还需要使用css去将其处理一下

                        <el-col :span="1"><div class="header-collapse" @click="onCollapse"><el-icon><component :is="isCollapse ? 'expand':'fold'"/> </el-icon></div></el-col>

图标的大小也是front-size来调整的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/696365.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

房屋出租管理系统需求分析及功能介绍

房屋租赁管理系统适用于写字楼、办公楼、厂区、园区、商城、公寓等商办商业不动产的租赁管理及租赁营销&#xff1b;提供资产管理&#xff0c;合同管理&#xff0c;租赁管理&#xff0c; 物业管理&#xff0c;门禁管理等一体化的运营管理平台&#xff0c;提高项目方管理运营效率…

纯血鸿蒙APP实战开发——一镜到底“页面转场”动画

介绍 本方案做的是页面点击卡片跳转到详情预览的转场动画效果 效果图预览 使用说明 点击首页卡片跳转到详情页&#xff0c;再点击进入路由页面按钮&#xff0c;进入新的路由页面 实现思路 首页使用了一种视觉上看起来像是组件的转场动画&#xff0c;这种转场动画通常是通过…

Linux---windows 机器和远端的 Linux 机器如何通过 XShell 传输文件

一、关于rzsz 这个工具用于 windows 机器和远端的 Linux 机器通过 Xshell 传输文件. 二、下载rzsz软件 用root输入命令&#xff1a; sudo yum install -y lrzsz下载完成&#xff1a; 三、如何传输 有图形化界面 1、从Windows机器传输给远端Linux机器 ① 直接拖拽 直接将…

栈和队列的基础知识,C语言实现及经典OJ题

基础知识 一.栈 1.栈的概念 定义&#xff1a;堆栈又名栈&#xff08;stack&#xff09;&#xff0c;它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶&#xff0c;相对地&#xff0c;把另一端称为栈底。 压栈&#xff1a;向一个栈插入新…

2024年3月 青少年等级考试机器人理论真题二级

202403 青少年等级考试机器人理论真题二级 第 1 题 一个机器小车&#xff0c;用左右两个电机分别控制左右车轮&#xff0c;左侧电机转速是100rpm&#xff0c;右侧电机转速是50rpm&#xff0c;则此机器小车&#xff1f;&#xff08; &#xff09; A&#xff1a;原地右转 B&am…

聚类分析 | 基于GA遗传算法优化kmeans聚类(Matlab)

聚类分析 | 基于GA遗传算法优化kmeans聚类&#xff08;Matlab&#xff09; 目录 聚类分析 | 基于GA遗传算法优化kmeans聚类&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基本介绍 GA-kmeans聚类算法&#xff0c;通过GA遗传算法优化kmeans聚类&…

【C++】set 和 map 学习及使用

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《C》 《Linux》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 文章目录 前言一、预备知识1.1 关联式容器1.2 键值对1.3 树型结构的关联式容器 二、set2.1 什么是 se…

【论文阅读笔记】HermesSim(Code is not Natural Language) (Security 24)

个人博客地址 HermesSim [Security 24] 论文&#xff1a;《Code is not Natural Language: Unlock the Power of Semantics-Oriented Graph Representation for Binary Code Similarity Detection》 仓库&#xff1a;https://github.com/NSSL-SJTU/HermesSim 提出的问题 二…

Rx(Reactive Extensions)的由来

既然我们已经介绍了响应式编程&#xff0c;现在是时候了解我们的明星了:响应式扩展&#xff0c;通常简称为Rx。微软开发了Reactive扩展库&#xff0c;使其易于处理事件流和数据流。在某种程度上&#xff0c;时变值本身就是一个事件流;每个值更改都是一种类型的事件它会更新依赖…

libcity 笔记:libcity/data/utils.py

1 get_dataset 2 list_dataset.py/ListDataset from torch.utils.data import Datasetclass ListDataset(Dataset):def __init__(self, data):"""data: 必须是一个 list"""self.data datadef __getitem__(self, index):return self.data[index…

机器学习中表格数据预处理

目录 缺失值处理 在dataframe中进行填补 使用模型填补缺失值&#xff08;随机森林&#xff09; 异常值 数据无量纲化 中心化 数据归一化 数据标准化 缩放处理 转换数据类型 文本—>数值preprocessing.LabelEncoder&#xff1a;标签专用&#xff0c;能够将分类转换为…

2024年3月 青少年等级考试机器人理论真题四级

202403 青少年等级考试机器人理论真题四级 第 1 题 Arduino UNO/Nano主控板&#xff0c;通过按键开关切换高低电平&#xff0c;电路搭设如下&#xff0c;该电路属于&#xff1f;&#xff08; &#xff09; A&#xff1a;外部上拉电阻电路 B&#xff1a;外部下拉电阻电路 C&a…