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

news2024/9/18 19:27:59

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 属性对列进行有效偏移和移动。

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

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

面向对象程序设计之继承(C++)

面向对象程序设计之继承(C++)

1.继承的定义 1.1继承的概念 继承(inheritance)机制是⾯向对象程序设计使代码可以复⽤的最重要的⼿段&#xff0c;它允许我们在保持原有类特性的基础上进⾏扩展&#xff0c;增加⽅法(成员函数)和属性(成员变量)&#xff0c;这样产⽣新的类&#xff0c;称派⽣类。继承 呈现了⾯向…
阅读更多...
Day26_0.1基础学习MATLAB学习小技巧总结（26）——数据插值

Day26_0.1基础学习MATLAB学习小技巧总结（26）——数据插值

利用空闲时间把碎片化的MATLAB知识重新系统的学习一遍&#xff0c;为了在这个过程中加深印象&#xff0c;也为了能够有所足迹&#xff0c;我会把自己的学习总结发在专栏中&#xff0c;以便学习交流。 参考书目&#xff1a; 1、《MATLAB基础教程 (第三版) (薛山)》 2、《MATL…
阅读更多...
Delphi CxGrid的主从表显示设置

Delphi CxGrid的主从表显示设置

界面编辑建立两个不同级别的视图层级-Layout 其实这是一个主从表关系&#xff0c; 1&#xff1a;填好主表的keyfieldnames 2&#xff1a;填好从表的keyfieldnames 3&#xff1a;填好从表的　detaikeyfieldNames与masterkeyfieldnames 4: 从表的数据源一定要按与主表关联的…
阅读更多...
Vue实用操作-2-如何使用网页开发者工具

Vue实用操作-2-如何使用网页开发者工具

第一步&#xff0c;添加扩展&#xff0c;live服务器 第二步&#xff0c;将 favicon.ico 文件加入到根目录下 第三步&#xff0c;选择以服务器方式运行&#xff0c;并打开浏览器 第四步&#xff0c;在极简插件你中找到 vue 对应插件&#xff0c;安装到扩展插件中 第五步&#xf…
阅读更多...
通过hosts.allow和hosts.deny限制用户登录

通过hosts.allow和hosts.deny限制用户登录

1、Hosts.allow和host.deny说明 两个文件是控制远程访问设置的&#xff0c;通过设置这个文件可以允许或者拒绝某个ip或者ip段的客户访问linux的某项服务。如果请求访问的主机名或IP不包含在/etc/hosts.allow中&#xff0c;那么tcpd进程就检查/etc/hosts.deny。看请求访问的主机…
阅读更多...
【南方科技大学】CS315 Computer Security 【Lab2 Buffer Overflow】

【南方科技大学】CS315 Computer Security 【Lab2 Buffer Overflow】

目录 引言软件要求启动虚拟机环境设置禁用地址空间布局随机化&#xff08;ASLR&#xff09;设置编译器标志以禁用安全功能 概述BOF.ctestShellCode.c解释 createBadfile.c 开始利用漏洞在堆栈上查找返回地址 实验2的作业 之前有写过一个 博客&#xff0c;大家可以先看看栈溢出…
阅读更多...
Qt ORM模块使用说明

Qt ORM模块使用说明

附源码&#xff1a;QxOrm是一个C库资源-CSDN文库 使用说明 把QyOrm文件夹拷贝到自己的工程项目下, 在自己项目里的Pro文件里添加include($$PWD/QyOrm/QyOrm.pri)就能使用了 示例test_qyorm.h写了表的定义,Test_QyOrm_Main.cpp中写了所有支持的功能的例子: 通过自动表单添加…
阅读更多...
C++——异常处理机制（try/catch/throw）

C++——异常处理机制（try/catch/throw）

一、什么是异常处理机制 C++中的异常处理机制是一种用来检测和处理程序执行期间可能存在的异常情况的技术。它允许开发者编写健壮的代码，能够提前预判和处理程序执行可能会出现的错误，保证程序正常执行，而不会导致程序崩溃。 C++异常处理主要由几个关键字组成： try、cat…
阅读更多...
C++笔记之std::map的实用操作

C++笔记之std::map的实用操作

C++笔记之std::map的实用操作 code review 文章目录 C++笔记之std::map的实用操作1.初始化1.1.使用列表初始化1.2.使用 `insert` 方法1.3.使用 `emplace` 方法1.4.复制构造1.5.移动构造2.赋值2.1.列表赋值2.2.插入元素2.3.批量插入3.取值3.1.使用 `[]` 操作符3.2.使用 `at()` …
阅读更多...
Vue路由配置、网络请求访问框架项目、element组件介绍学习

Vue路由配置、网络请求访问框架项目、element组件介绍学习

系列文章目录 第一章 基础知识、数据类型学习 第二章 万年历项目 第三章 代码逻辑训练习题 第四章 方法、数组学习 第五章 图书管理系统项目 第六章 面向对象编程&#xff1a;封装、继承、多态学习 第七章 封装继承多态习题 第八章 常用类、包装类、异常处理机制学习 第九章 集…
阅读更多...
回归预测|基于开普勒优化相关向量机的数据回归预测Matlab程序KOA-RVM 多特征输入单输出 含基础RVM

回归预测|基于开普勒优化相关向量机的数据回归预测Matlab程序KOA-RVM 多特征输入单输出 含基础RVM

回归预测|基于开普勒优化相关向量机的数据回归预测Matlab程序KOA-RVM 多特征输入单输出 含基础RVM 文章目录 一、基本原理1. **相关向量机&#xff08;RVM&#xff09;**2. **开普勒优化算法&#xff08;KOA&#xff09;**3. **KOA-RVM回归预测模型**总结 二、实验结果三、核心…
阅读更多...
k8s集群备份与迁移

k8s集群备份与迁移

什么是 Velero? Velero 是一个用Go语言开发的开源工具&#xff0c;用于 Kubernetes 集群的备份、恢复、灾难恢复和迁移。 Velero备份工作流程 当用户发起velero backup create时&#xff0c;会执行如下四个动作&#xff1a; velero客户端调用Kubernetes API创建自定义资源并…
阅读更多...
启动windows更新/停止windows更新，在配置更新中关闭自动更新的方法

启动windows更新/停止windows更新，在配置更新中关闭自动更新的方法

在Windows操作系统中&#xff0c;启动或停止Windows更新&#xff0c;以及调整“配置更新”的关闭方法&#xff0c;涉及多种途径&#xff0c;这里将详细阐述几种常用的专业方法。 启动Windows更新 1.通过Windows服务管理器&#xff1a; -打开“运行”对话框&#xff08;…
阅读更多...
15. 三数之和（实际是双指针类型的题目）

15. 三数之和（实际是双指针类型的题目）

15. 三数之和 15. 三数之和 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以…
阅读更多...
Uniapp的alertDialog返回值+async/await处理确定/取消问题

Uniapp的alertDialog返回值+async/await处理确定/取消问题

今天在使用uniui的alertDialog时&#xff0c;想添加一个确定/取消的警告框时 发现alertDialog和下面的处理同步进行了&#xff0c;没有等待alaertDialog处理完才进行 查询后发现问题在于 await 关键字虽然被用来等待 alertDialog.value.open() 的完成&#xff0c;但是 alertDi…
阅读更多...
Android中的冷启动，热启动和温启动

Android中的冷启动，热启动和温启动

在App启动方式中分为三种&#xff1a;冷启动&#xff08;cold start&#xff09;、热启动&#xff08;hot start&#xff09;、温启动&#xff08;warm start&#xff09; 冷启动&#xff1a; 系统不存在App进程&#xff08;App首次启动或者App被完全杀死&#xff09;时启动A…
阅读更多...
使用 GaLore 预训练LLaMA-7B

使用 GaLore 预训练LLaMA-7B

项目代码&#xff1a; https://github.com/jiaweizzhao/galorehttps://github.com/jiaweizzhao/galore 参考博客&#xff1a; https://zhuanlan.zhihu.com/p/686686751 创建环境 基础环境配置如下&#xff1a; 操作系统: CentOS 7CPUs: 单个节点具有 1TB 内存的 Intel CP…
阅读更多...
F12抓包11：UI自动化 - Recoder（记录器）

F12抓包11：UI自动化 - Recoder（记录器）

课程大纲 使用场景&#xff08;导入和导出&#xff09;: ① 测试的重复性工作&#xff0c;本浏览器录制并进行replay&#xff1b; ② 导入/导出录制脚本&#xff0c;移植后replay&#xff1b; ③ 导出给开发进行replay复现bug&#xff1b; ④ 进行前端性能分析。 1、录制脚…
阅读更多...
kubernetes 学习 尚硅谷

kubernetes 学习 尚硅谷

出自 https://www.bilibili.com/video/BV13Q4y1C7hS 相关命令 kubeadm init &#xff1a;将当前节点创建为主节点 kubectl get nodes&#xff1a;获取集群所有节点 kubectl apply -f xxx.yaml&#xff1a;根据配置文件&#xff0c;给集群创建资源 kubectl delete -f xx.yaml&…
阅读更多...
【C++】模板进阶：深入解析模板特化

【C++】模板进阶：深入解析模板特化

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与Queue 本章将…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023