组件-Element---Layout（布局）

最新推荐文章于 2025-07-17 11:18:15 发布
原创 最新推荐文章于 2025-07-17 11:18:15 发布 · 574 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Element

本文详细介绍了Element UI中的Layout布局组件，包括基础布局、分栏间隔、混合布局、分栏偏移、对齐方式以及响应式布局。同时提到了用于响应式隐藏的断点类名。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

组件-Element—Layout（布局）

组件—安装：

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
	new Vue({
		el: '#app',
		data: function() {
			return { visible: false }
		}
	})
</script>

组件—布局

  1. 基础布局：
    在这里插入图片描述
<el-row>
	<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
		<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
			<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
	<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
	<el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
	<el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
	<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
	<el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
	<el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
	<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
	<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
	<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	.el-col {
		border-radius: 4px;
	}
	.bg-purple-dark {
		background: #99a9bf;
	}
	.bg-purple {
		background: #d3dce6;
	}
	.bg-purple-light {
		background: #e5e9f2;
	}
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
</style>
  1. 分栏间隔
    在这里插入图片描述
<el-row :gutter="20">
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
   <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
   .el-row {
   		margin-bottom: 20px;
   		&:last-child {
   			margin-bottom: 0;
   		}
   }
   .el-col {
   		border-radius: 4px;
   }
   .bg-purple-dark {
   		background: #99a9bf;
   }
   .bg-purple {
   		background: #d3dce6;
   }
   .bg-purple-light {
   		background: #e5e9f2;
   }
   .grid-content {
   		border-radius: 4px;
   		min-height: 36px;
   }
   .row-bg {
   		padding: 10px 0;
   		background-color: #f9fafc;
   }
</style>
  1. 混合布局
    在这里插入图片描述
<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
  1. 分栏偏移
    在这里插入图片描述
<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
  1. 对齐方式
    在这里插入图片描述
<el-row type="flex" class="row-bg">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
  1. 响应式布局
    在这里插入图片描述
<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>

<style>
	.el-col {
		  border-radius: 4px;
	}
	.bg-purple-dark {
		  background: #99a9bf;
	}
	.bg-purple {
		  background: #d3dce6;
	  }
	 .bg-purple-light {
	 	  background: #e5e9f2;
	  }
	  .grid-content {
	  	  border-radius: 4px;
	  	  min-height: 36px;
	  }
</style>

  1. 基于断点的隐藏类

    import 'element-ui/lib/theme-chalk/display.css';

    包含的类名及其含义为：

    hidden-xs-only - 当视口在 xs 尺寸时隐藏
hidden-sm-only - 当视口在 sm 尺寸时隐藏
hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
hidden-md-only - 当视口在 md 尺寸时隐藏
hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
hidden-lg-only - 当视口在 lg 尺寸时隐藏
hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
hidden-xl-only - 当视口在 xl 尺寸时隐藏

  2. Row Attributes（行属性）
    在这里插入图片描述

  3. Col Attributes（Col属性）
    在这里插入图片描述

Element-UI源码——Layout布局
qq_43391730的博客
03-31 1455
include b 混入了mixins/mixins中的b其中在config.scss定义了 BEM的Class命名风格。@include utils-clearfix 混入utils.scss 中的utils-clearfix 清除浮动。如果没有传入第二个参数map ，会使用默认值 map，会使用默认值map，会使用默认值–breakpoints。@include when的混入，其实就是用来生成is-开头表示状态用的class。@include m 混入mixins中的m。
一步步创建vue-element-admin框架实现004-整体样式布局实现
binggoling
01-06 1655
目录一步步创建vue-element-admin框架实现004-整体样式布局实现一、样式文件二、创建layout布局需要的组件1）新增文件：src\layout\index.vue2）新增文件：src\layout\components\Navbar.vue3）新增文件：src\layout\components\AppMain.vue4）新增文件：src\layout\components\Sidebar\index.vue三、引用布局layout 一步步创建vue-element-admin框架实现00
ElementUI 组件：Layout布局（el-row、el-col）
ChinaDragon10的博客
01-31 4306
ElementUI 组件：Layout布局（el-row、el-col）
博客项目(从零到一)-1-前端Vue3基本框架的搭建
最新发布
小小啊python的博客
07-17 561
本文介绍了在Vue3项目中配置Vue Router并结合Element Plus实现页面布局的方法。主要内容包括：1) 环境搭建(Node.js、npm、Vue CLI安装)；2) 使用Vite创建Vue3项目并安装Vue Router；3) 路由配置与组件开发；4) Element Plus的安装及基本布局组件的使用。通过示例代码演示了如何创建Header+Main的页面结构，实现无刷新路由跳转和组件切换。文章为后续开发博客项目奠定了基础，展示了如何利用现代前端工具链构建单页应用的基本框架。
Element之layout布局
qq_51481048的博客
02-10 4787
layout布局(24分栏布局）用到的标签为：<el-row><el-col> 一：基础布局(通过 row 和 col 组件，并通过 col 组件的 span 属性自由的组合布局。) 样式自定义即可 二：分栏间隔 分栏布局 只需要在<el-row>标签上定义gutter(中文沟的意思)属性 如：<el-row :gutter='20'> 这里的20什么意思呢？首先是以px为单位，就是说间距为20px 实际情况如何呢？ 首先间距20.
Element简单的容器布局
weixin_46981685的博客
05-26 647
Element简单的容器布局 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .el-head
【Element-ui】Layout与Container组件
m0_62599305的博客
12-02 2062
在现代Web开发中，页面的布局设计是至关重要的一环。为了简化布局的实现，Element UI提供了强大的Layout和Container组件。这两个组件使得页面布局变得更加灵活和易于管理。在本文中，我们将深入探讨Element UI的Layout和Container组件，了解它们的基本用法以及如何通过它们实现响应式的页面布局。Element UI 的 Layout 和 Container 组件为页面布局提供了便利的解决方案。通过灵活的组合，我们可以轻松创建出各种风格的页面布局，满足不同项目的需求。
vue-layout-diy:基于vue和flex的自定义布局
05-16
完成基于flex布局的组件SGrid SGridItem； 引入Element，完成SEmpty默认显示块； 异步组件配合代码分离时: 若使用插件的形式，s-empty在dev模式下渲染正常，在buid模式下无法渲染。 在main.js中通过Vue.component...
基于vue-element组件实现音乐播放器功能
08-27
首先，文章中使用了 Element 组件库中的 Layout、Button、Slider、Progress、Popover 等组件来布局播放器的界面。其中，Layout 组件用于布局整个播放器，Button 组件用于控制播放和暂停，Slider 组件用于调整音量，...
Vue实训---3-element plus的使用与布局
qq_40930841的博客
11-23 3334
效果出现后，可以将这些el-button代码删掉，这样就不会影响我们后续的项目。ElementPlus官网对于每种组件都给出了代码示例。
vue-element-admin源码解读——项目组件布局及状态管理
星留影的刹那间
06-10 4773
vue-element-admin作为一款优秀的前端解决方案，整个框架的结构非常清晰，同时利用Vuex和Vue Router来实现SPA(单页面应用)开发模式，只需要简单的编写组件和配置文件即可完成项目的初步搭建，这对某些需要简单的前端界面的团队无疑是个福利。不过对于需要高度自定义的公司可能还需要更加深入的了解一下，所以这篇文章将带你一步步的摸索整个项目的组件是如何加载的。 基础页面 要摸索当然首先就要找到入口，对于界面而言当然就是index.html的作为入口了。 public\index.html &l
pro-layout:易于使用的“蚂蚁设计Vue”布局
05-13
蚂蚁设计专业版图 安装 # yarn yarn add @ant-design-vue/pro-layout@next # npm npm i @ant-design-vue/pro-layout@next -S 基本用法 首先，应将所需的图标添加到库中。 import 'ant-design-vue/dist/antd.less' ; import { createApp } from 'vue' ; import ProLayout , { PageContainer } from '@ant-design-vue/pro-layout' ; const app = createApp ( ) ; app . use ( ProLayout ) . use ( PageContainer ) . mount ( '#app' ) ; 之后，您可以像下面这样简单地在Vue组件中使用
Layout布局(element ui)
Death Note
01-17 2963
其实layout布局的使用在element官网上都有相关描述，也有相关示例，很容易快速上手。但是在实际使用的过程还是发现一些问题，于是做了一些学习研究，在此和大家分享一下。
element源码（二）Layout 布局组件
weixin_47169270的博客
09-26 2208
element源码，layout布局组件
ProLayout 布局
Jimmy的专栏
10-29 7307
第一次采用ProLayout的时候也担心会不会不够灵活，比人我需要修改折叠按钮（collapsed）的位置能不能实现，带着这种猜疑，我进入官网，我的担心立刻解除，他们竟然直接就有了类似的demo: （可以进入以下网址，查看具体示例代码）https://procomponents.ant.design/components/layout#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%9A%84-collapsed。
Element ui 使用数据表中的 doLayout 方法 [vae3 setup]
热门推荐
x2826436174的博客
12-24 1万+
最近写需求的时候遇到问题 在进行国际化操作的时候 由于每列表头的 中英文 文字描述的长度是不一样的 而且我还使用了 fixed 来固定列，导致固定列的样式不会像其他列一样跟着变化 如图： 然后第一时间想到在 饿了么 文档查询有没有解决的办法 如图，进行重新布局 但是问题又来了，网上找的方法都是基于 vue2 写的 而我的是使用 vue3 中的 setup 写的 而存在差异 其他博文写法： 我的写法： 这个问题困扰了一天，记录一下 ...
[element-ui] el-table表格数据变化，页面不更新问题 doLayout , 1 给table加个key 2 给el-table-column加key
qq_14993591的博客
11-18 749
【代码】[element-ui] el-table表格数据变化，页面不更新问题 doLayout , 给table加个key。
element表格重新布局，element表格显示不全，doLayout
qingdi1的博客
12-07 2168
element表格重新布局，element表格显示不全，doLayout 问题：解决办法 Table 的 doLayout 方法，用于重新计算 Table 的布局 问题： 1.element table show-summary 合计行不显示问题 2.element table显示格式不正确 3.element table显示不完整 解决办法 重新布局table updated() { this.$nextTick(() => { this.$refs['table'].doLay
element ui table 组件固定列踩坑 使用doLayout
weixin_48775030的博客
04-21 6349
切换数据源 导致table 固定列多出一行空白 使用table 组件自带的方法可解决 获取数据后 就哦啦
Element-UI常用组件实践与总结
- Element-UI提供了多种布局组件，如Layout、Header、Footer、Aside和Main等，用于构建页面的整体结构。 - 这些布局组件可以灵活组合，形成一至多列的布局，支持响应式设计，适配不同屏幕尺寸。 4. 分页 - 分页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值