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

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

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

1. 背景

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

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

2. 分欄布局

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

如下代碼，即為將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. 分欄間隔

有時候想為不同分欄之間設(shè)定一定的間隔，可以使用<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>

需要在分欄里面新增元素，才能實現(xiàn)分欄間隔，代碼修改如下則間隔生效。

 <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. 分欄偏移

有時候想讓某個分欄不從左邊顯示，而是直接顯示到中間或者右側(cè)，例如右側(cè)導航欄，我們希望它處于右側(cè)且占據(jù)頁面1/3的寬度。此時可以借助offset屬性來實現(xiàn)，表示偏移量。

此時，想占據(jù)1/3寬度，則:span應(yīng)為8，偏移量應(yīng)為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. 對齊方式

如果想讓整個行居左、居中、居右對齊，則可以直接設(shè)置<el-row>的對齊方式。

此時需要先設(shè)置type="flex"來啟用對齊方式，然后通過justify屬性來設(shè)置具體的對齊方式，例如下面的例子實現(xiàn)了居中對齊。

 	<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. 響應(yīng)式布局

element和bootstrap的響應(yīng)式布局原理相同，都是通過為列設(shè)置不同分辨率下的占用寬度比例來實現(xiàn)的。

例如我們想實現(xiàn)在比較大的分辨率（電腦），每分欄占據(jù)屏幕寬度的1/4，而在比較小寬度（手機），每分欄占據(jù)屏幕全部寬度。

這樣就能保證在手機上也能完整顯示內(nèi)容，則可以使用如下代碼：

   <span>響應(yīng)式布局</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>

在電腦上效果如下：

在這里插入圖片描述