Element 布局组件el-row和el-col 详解

purple.taro

已于 2022-07-20 16:56:59 修改

阅读量7.9w

点赞数 60

分类专栏： VUE之element-ui 文章标签： vue.js elementui 前端

于 2022-07-20 16:38:14 首次发布

本文链接：https://blog.csdn.net/zxlyx/article/details/125895348

版权

VUE之element-ui 专栏收录该内容

1 篇文章 4 订阅

订阅专栏

1. 背景

element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。

区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。

2. 分栏布局

首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。

如下代码，即为将1行等分为2列，为了便于区分列，我们为列添加了不同的样式，另外注意<el-divider></el-divider>是分割线，此处用于区分不同的示例。

<template>
  <div>
      <span>每行24分栏布局</span>
    <el-row>
      <el-col :span="12" class="lightgreen-box">示例1</el-col>
      <el-col :span="12" class="orange-box">示例1</el-col>
    </el-row>
    <el-divider></el-divider>
  </div>
</template>
<style scoped>
    .lightgreen-box {
      background-color: lightgreen;
      height: 24px;
    }
    .orange-box {
      background-color: orange;
      height: 24px;
    }
</style>

效果如下：

3. 分栏间隔

有时候想为不同分栏之间设定一定的间隔，可以使用<el-row>标签的:gutter属性，注意默认间隔为0。

此时需要注意的是，下面的写法，间隔是不生效的。

     <span>分栏间隔 无效</span>
    <el-row :gutter="50">
      <el-col :span="8" class="lightgreen-box">示例2</el-col>
      <el-col :span="8" class="orange-box">示例2</el-col>
      <el-col :span="8" class="lightgreen-box">示例2</el-col>
    </el-row>
    <el-divider></el-divider>

需要在分栏里面新增元素，才能实现分栏间隔，代码修改如下则间隔生效。

 <span>分栏间隔 有效</span>
    <el-row :gutter="24">
      <el-col :span="8">
        <div class="lightgreen-box">示例3</div>
      </el-col>
      <el-col :span="8">
        <div class="orange-box">示例3</div>
      </el-col>
      <el-col :span="8">
        <div class="lightgreen-box">示例3</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

上面两个示例效果如下：

4. 分栏偏移

有时候想让某个分栏不从左边显示，而是直接显示到中间或者右侧，例如右侧导航栏，我们希望它处于右侧且占据页面1/3的宽度。此时可以借助offset属性来实现，表示偏移量。

此时，想占据1/3宽度，则:span应为8，偏移量应为24-8=16，所以代码如下：

      <span>分栏偏移</span>
    <el-row>
      <el-col :span="8" :offset="16">
        <div class="lightgreen-box">示例4</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

效果如下：

5. 对齐方式

row组件的type="flex"启动flex布局，再通过row组件的justify属性调整排版方式，属性值分别有:

justify=center 居中对齐
justify=start 左对齐
justify=end 右对齐
justify=space-between 空格间距在中间对齐
justify=space-around 左右各占半格空格对齐

如果想让整个行居左、居中、居右对齐，则可以直接设置<el-row>的对齐方式。

此时需要先设置type="flex"来启用对齐方式，然后通过justify属性来设置具体的对齐方式，例如下面的例子实现了居中对齐。

     <span>对齐方式</span>
    <el-row type="flex" justify="center">
      <el-col :span="12">
        <div class="lightgreen-box">示例5</div>
      </el-col>
    </el-row>
    <el-divider></el-divider>

效果如下：

6. 响应式布局

element和bootstrap的响应式布局原理相同，都是通过为列设置不同分辨率下的占用宽度比例来实现的。

例如我们想实现在比较大的分辨率（电脑），每分栏占据屏幕宽度的1/4，而在比较小宽度（手机），每分栏占据屏幕全部宽度。这样就能保证在手机上也能完整显示内容，则可以使用如下代码：

   <span>响应式布局</span>
    <el-row>
      <el-col :lg="6" :xs="24" class="lightgreen-box">示例6</el-col>
      <el-col :lg="6" :xs="24" class="orange-box">示例6</el-col>
      <el-col :lg="6" :xs="24" class="lightgreen-box">示例6</el-col>
      <el-col :lg="6" :xs="24" class="orange-box">示例6</el-col>
    </el-row>

在电脑上效果如下：

在手机上效果如下：

注意具体的尺寸属性为：

属性	使用说明
xs	宽度<768px
sm	>=768px
md	>=992px
lg	>=1200px
xl	>=1920px

7. 小结

element的布局跟bootstrap原理是一样的，使用起来也比较方便，具体的参数其实不需要都记住，只要知道用法，使用时去官网查询即可。

8. 练习

        <span class="field-label">方块选择:</span>
        <!-- 选择屏幕框 -->
          <select v-model="selected" @change="selectbj(selected)">
            <option v-for="option in layouts" :value="option.value">
                {{ option.name }}
            </option>
          </select>

data默认初始化数据:

      selected: 0,
      layouts: [
        { 'name': '1x1模式', 'value': '0' },
        { 'name': '2x1模式', 'value': '1' },
        { 'name': '2x2模式', 'value': '2' },
        { 'name': '3x2模式', 'value': '3' },
        { 'name': '3x3模式', 'value': '4' },
        { 'name': '1+5模式', 'value': '5' }
      ],

布局代码:

    <el-main v-model="selected" >
      <div class="block" style="height:400px">
            <!-- {{selected}} -->
            <div style="height:100%;width:100%" v-if="selected==0">
            <!-- 1*1布局 -->
                <el-row :gutter="10" type="flex" class="grid-one-contentheight" justify="center">
                  <el-col :span="24"></el-col>
                </el-row>
            </div>
            <!-- 2*1布局 -->
            <div style="height:100%;width:100%" v-else-if="selected==1">
                <el-row :gutter="10" type="flex" class="row-bg el-row-two" justify="space-between">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 2*2 -->
            <div style="height:100%;width:100%" v-else-if="selected==2">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 3*2布局 -->
            <div style="height:100%;width:100%" v-else-if="selected==3">
              <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                  <el-col :span="12"><div class="grid-content "></div></el-col>
                </el-row>
            </div>
            <!-- 3*3模式 -->
            <div style="height:100%;width:100%" v-else-if="selected==4">
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="center">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
            </div>
            <!-- 模式 -->
            <div style="height:100%;width:100%" v-else>
               <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                  <el-col :span="8"><div class="grid-a-contentWidth"></div></el-col>
                </el-row>
                <br>
                <el-row :gutter="10" type="flex" class="row-bg" justify="start">
                    <el-col :span="8">
                      <div class="grid-a-contentWidth"></div>
                      <br>
                      <div class="grid-a-contentWidth"></div>
                      </el-col>
                    <el-col :span="16"><div class="grid-a-content-a-Width" ></div></el-col>
                </el-row>  
            </div>
          </div>
    </el-main>

样式(从里面对应取一下):

<style scoped>
  .box-card{
    width: 400px;
    margin: 20px auto;
  }
  .block{
    padding: 30px 24px;
    background-color: rgb(27, 16, 16);
  }
  .alert-item{
    margin-bottom: 10px;
  }
  .tag-item{
    margin-right: 15px;
  }
  .link-title{
    margin-left:35px;
  }
  .components-container {
		position: relative;
		height: 100vh;
	}
 
	.left-container {
		background-color: #F38181;
		height: 100%;
	}
 
	.right-container {
		background-color: #FCE38A;
		height: 200px;
	}
 
	.top-container {
		background-color: #FCE38A;
		width: 100%;
		height: 100%;
	}
 
	.bottom-container {
		width: 100%;
		background-color: #95E1D3;
		height: 100%;
	}
 
  .left-container-twoOne {
		background-color: rgb(110, 75, 75);
    height: 100%;
  }
 
  .container-onetoOne {
      background-color: rgb(47, 80, 74);
      height: 100%;
      width: 50%;
  }
 
  .container-onetoTwo {
      background-color: rgb(61, 19, 56);
      height: 100%;
      width: 50%;
  }
 
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #57926b;
  }
  .bg-purple {
    background: #7e2970;
  }
  .bg-purple-light {
    background: #071c4d;
  }
  .grid-content {
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 150px;
    min-width: 100px;
  }
  .grid-contentB {
    background-color: rgb(64, 56, 134);
    border-radius: 4px;
    min-height: 150px;
    min-width: 100px;
  }
  .grid-a-contentWidth {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 100px;
  }
  .grid-a-content-a-Width {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 220px;
  }
 
  .grid-one-contentheight {    
    background-color: rgb(44, 143, 121);
    border-radius: 4px;
    min-height: 100%;
  }
 
.el-row-two {
    margin-bottom: 80px;
    margin-top: 80px;
  
  }
</style>

效果:

参考：

1、Element el-row el-col 布局组件详解

2、vue vue-element-ui组件 layout布局系列学习

purple.taro

关注

60
点赞
踩
264

收藏

觉得还不错? 一键收藏
打赏
3
评论
Element 布局组件el-row和el-col 详解

如下代码，即为将1行等分为2列，为了便于区分列，我们为列添加了不同的样式，另外注意是分割线，此处用于区分不同的示例。element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。首先每行使用标签标识，然后每行内的列使用标识，至于每列整行的宽度比例，则使用span属性进行设置。此时需要注意的是，下面的写法，间隔是不生效的。属性使用说明。.........
复制链接

扫一扫