Element?el-row?el-col布局組件怎么用

這篇文章主要介紹了Element el-row el-col布局組件怎么用的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Element el-row el-col布局組件怎么用文章都會有所收獲，下面我們一起來看看吧。

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>

效果如下：

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>

在電腦上效果如下：

在手機上效果如下：

注意具體的尺寸屬性為：

關于“Element el-row el-col布局組件怎么用”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Element el-row el-col布局組件怎么用”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。