Element布局組件el-row和el-col的使用

更新時(shí)間：2024年08月16日 09:14:38 作者：帥偉????

這篇文章主要介紹了Element布局組件el-row和el-col的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Element布局組件el-row和el-col

分欄布局

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

如下代碼：

即為將1行等分為2列，為了便于區(qū)分列，我們?yōu)榱刑砑恿瞬煌臉邮剑?/li>
另外注意<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>

效果如下：

分欄間隔

不同分欄之間設(shè)定一定的間隔，可以使用<el-row>標(biāo)簽的:gutter屬性，注意默認(rèn)間隔為0。

此時(shí)需要注意的是，下面的寫(xiě)法，間隔是不生效的

<span>分欄間隔 無(wú)效</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>

需要在分欄里面新增元素，才能實(shí)現(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>

上面兩個(gè)示例效果如下：

分欄偏移

el-row和el-col在element ui中的注意點(diǎn)

el-row是將一行分成24份。代表一行。

el-row中寫(xiě)el-col，el-col代表的是列，寫(xiě)幾個(gè)el-col就表示有幾列。
列的寬度用span來(lái)規(guī)定。
表示你這列占這一行24份中的幾份。

注意：

el-row中只有1個(gè)el-col的時(shí)候，el-col的span可以不用寫(xiě)，它默認(rèn)占一行的24份，但是el-row有多個(gè)el-col的時(shí)候，el-col必須要寫(xiě)span

注意：

不管el-row里嵌套多少el-row,el-row都代表24份

//第1層的el-row表示1行，這行分成24份
//父元素
<el-row>
    <el-col>
        //下面這個(gè)el-row是子元素，但是它也是一行，這一行有24份
        <el-row>
            //下面的el-col，這一列，要想占滿這行，就是占24份,span要為24才行，記住，el-row表示24份
            <el-col :span="24"></el-col>
        </el-row>
    </el-col>
</el-row>