Element el-row el-col 布局組件詳解

更新時間：2022年05月23日 16:00:09 投稿：jingxian

這篇文章主要介紹了Element el-row el-col 布局組件使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

1. 背景

element的布局方式與bootstrap原理是一樣的，將網頁劃分成若干行，然后每行等分為若干列，基于這樣的方式進行布局，形象的成為柵欄布局。

區(qū)別是element可將每行劃分為24個分欄，而bootstrap是劃分為12個分欄，從使用角度，還是24個分欄更加精細。

2. 分欄布局

首先每行使用<el-row>標簽標識，然后每行內的列使用<el-col>標識，至于每列整行的寬度比例，則使用:span屬性進行設置。

如下代碼，即為將1行等分為2列，為了便于區(qū)分列，我們?yōu)榱刑砑恿瞬煌臉邮?，另外注?lt;el-divider></el-divider>是分割線，此處用于區(qū)分不同的示例。

<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>

效果如下：

在這里插入圖片描述

4. 對齊方式

如果想讓整個行居左、居中、居右對齊，則可以直接設置<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>

在這里插入圖片描述

5. 響應式布局

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>

在電腦上效果如下：

在這里插入圖片描述