Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

TIP

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

基础布局

使用列创建基础网格布局。

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

Layout 布局 - 图1

  1. <template>
  2.   <el-row>
  3.     <el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>
  4.   </el-row>
  5.   <el-row>
  6.     <el-col :span="12"><div class="grid-content ep-bg-purple" /></el-col>
  7.     <el-col :span="12"><div class="grid-content ep-bg-purple-light" /></el-col>
  8.   </el-row>
  9.   <el-row>
  10.     <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  11.     <el-col :span="8"><div class="grid-content ep-bg-purple-light" /></el-col>
  12.     <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  13.   </el-row>
  14.   <el-row>
  15.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  16.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  17.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  18.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  19.   </el-row>
  20.   <el-row>
  21.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  22.     <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
  23.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  24.     <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
  25.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  26.     <el-col :span="4"><div class="grid-content ep-bg-purple-light" /></el-col>
  27.   </el-row>
  28. </template>
  30. <style lang="scss">
  31. .el-row {
  32.   margin-bottom: 20px;
  33. }
  34. .el-row:last-child {
  35.   margin-bottom: 0;
  36. }
  37. .el-col {
  38.   border-radius: 4px;
  39. }
  41. .grid-content {
  42.   border-radius: 4px;
  43.   min-height: 36px;
  44. }
  45. </style>

分栏间隔

支持列间距。

行提供 gutter 属性来指定列之间的间距，其默认值为0。

Layout 布局 - 图2

  1. <template>
  2.   <el-row :gutter="20">
  3.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  4.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  5.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  6.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  7.   </el-row>
  8. </template>
  10. <style>
  11. .el-row {
  12.   margin-bottom: 20px;
  13. }
  14. .el-row:last-child {
  15.   margin-bottom: 0;
  16. }
  17. .el-col {
  18.   border-radius: 4px;
  19. }
  21. .grid-content {
  22.   border-radius: 4px;
  23.   min-height: 36px;
  24. }
  25. </style>

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

Layout 布局 - 图3

  1. <template>
  2.   <el-row :gutter="20">
  3.     <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
  4.     <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  5.   </el-row>
  6.   <el-row :gutter="20">
  7.     <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  8.     <el-col :span="8"><div class="grid-content ep-bg-purple" /></el-col>
  9.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  10.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  11.   </el-row>
  12.   <el-row :gutter="20">
  13.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  14.     <el-col :span="16"><div class="grid-content ep-bg-purple" /></el-col>
  15.     <el-col :span="4"><div class="grid-content ep-bg-purple" /></el-col>
  16.   </el-row>
  17. </template>
  19. <style>
  20. .el-row {
  21.   margin-bottom: 20px;
  22. }
  23. .el-row:last-child {
  24.   margin-bottom: 0;
  25. }
  26. .el-col {
  27.   border-radius: 4px;
  28. }
  30. .grid-content {
  31.   border-radius: 4px;
  32.   min-height: 36px;
  33. }
  34. </style>

列偏移

您可以指定列偏移量。

通过制定 col 组件的 offset 属性可以指定分栏偏移的栏数。

Layout 布局 - 图4

  1. <template>
  2.   <el-row :gutter="20">
  3.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  4.     <el-col :span="6" :offset="6"
  5.       ><div class="grid-content ep-bg-purple"
  6.     /></el-col>
  7.   </el-row>
  8.   <el-row :gutter="20">
  9.     <el-col :span="6" :offset="6"
  10.       ><div class="grid-content ep-bg-purple"
  11.     /></el-col>
  12.     <el-col :span="6" :offset="6"
  13.       ><div class="grid-content ep-bg-purple"
  14.     /></el-col>
  15.   </el-row>
  16.   <el-row :gutter="20">
  17.     <el-col :span="12" :offset="6"
  18.       ><div class="grid-content ep-bg-purple"
  19.     /></el-col>
  20.   </el-row>
  21. </template>
  23. <style>
  24. .el-row {
  25.   margin-bottom: 20px;
  26. }
  27. .el-row:last-child {
  28.   margin-bottom: 0;
  29. }
  30. .el-col {
  31.   border-radius: 4px;
  32. }
  34. .grid-content {
  35.   border-radius: 4px;
  36.   min-height: 36px;
  37. }
  38. </style>

对齐方式

默认使用 flex 布局来对分栏进行灵活的对齐。

您可以通过justify 属性来定义子元素的排版方式，其取值为start、center、end、space-between、space-around或space-evenly。

Layout 布局 - 图5

  1. <template>
  2.   <el-row class="row-bg">
  3.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  4.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  5.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  6.   </el-row>
  7.   <el-row class="row-bg" justify="center">
  8.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  9.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  10.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  11.   </el-row>
  12.   <el-row class="row-bg" justify="end">
  13.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  14.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  15.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  16.   </el-row>
  17.   <el-row class="row-bg" justify="space-between">
  18.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  19.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  20.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  21.   </el-row>
  22.   <el-row class="row-bg" justify="space-around">
  23.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  24.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  25.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  26.   </el-row>
  27.   <el-row class="row-bg" justify="space-evenly">
  28.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  29.     <el-col :span="6"><div class="grid-content ep-bg-purple-light" /></el-col>
  30.     <el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col>
  31.   </el-row>
  32. </template>
  34. <style>
  35. .el-row {
  36.   margin-bottom: 20px;
  37. }
  38. .el-row:last-child {
  39.   margin-bottom: 0;
  40. }
  41. .el-col {
  42.   border-radius: 4px;
  43. }
  45. .grid-content {
  46.   border-radius: 4px;
  47.   min-height: 36px;
  48. }
  49. </style>

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

Layout 布局 - 图6

  1. <template>
  2.   <el-row :gutter="10">
  3.     <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
  4.       ><div class="grid-content ep-bg-purple"
  5.     /></el-col>
  6.     <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
  7.       ><div class="grid-content ep-bg-purple-light"
  8.     /></el-col>
  9.     <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
  10.       ><div class="grid-content ep-bg-purple"
  11.     /></el-col>
  12.     <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
  13.       ><div class="grid-content ep-bg-purple-light"
  14.     /></el-col>
  15.   </el-row>
  16. </template>
  18. <style>
  19. .el-col {
  20.   border-radius: 4px;
  21. }
  23. .grid-content {
  24.   border-radius: 4px;
  25.   min-height: 36px;
  26. }
  27. </style>

基于断点的隐藏类

Element Plus 额外提供了一系列类名，用于在某些条件下隐藏元素。 这些类名可以添加在任何 DOM 元素或自定义组件上。 如果需要，请自行引入以下文件：

  1. import 'element-plus/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 尺寸时隐藏

Row 属性

属性说明类型可选值默认值
gutter栅格间隔number—0
justifyflex 布局下的水平排列方式stringstart/end/center/space-around/space-between/space-evenlystart
alignflex 布局下的垂直排列方式stringtop/middle/bottomtop
tag自定义元素标签string*div

Row 插槽

插槽名说明子标签
—自定义默认内容Col

Col 属性

属性说明类型可选值默认值
span栅格占据的列数number—24
offset栅格左侧的间隔格数number—0
push栅格向右移动格数number—0
pull栅格向左移动格数number—0
xs<768px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——
sm≥768px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——
md≥992px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——
lg≥1200px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——
xl≥1920px 响应式栅格数或者栅格属性对象number/object (例如 {span: 4, offset: 4})——
tag自定义元素标签string*div

Col 插槽

插槽名说明
—自定义默认内容

源代码

文档 Layout 布局 - 图7