Element-UI使用el-row高度設(shè)置方式
更新時(shí)間：2024年08月06日 08:42:32 作者：清雨未盡時(shí)
這篇文章主要介紹了Element-UI使用el-row高度設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Element-UI 使用el-row 高度設(shè)置
使用el-row 布局列數(shù)多個(gè)時(shí)候，出現(xiàn)了高度不適應(yīng)且排列混亂 的問題
處理辦法在 el-row 布局屬性上加入
<el-row :gutter="20" class="el-row">
.el-row {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap
}
.el-card {
min-width: 100%;
height: 100%; 高度要設(shè)置百分比才可以
margin-right: 20px;
transition: all .5s;
}設(shè)置完成后
el-row和el-col在element ui中的注意點(diǎn)
el-row是將一行分成24份。代表一行。
el-row中寫el-col，el-col代表的是列，寫幾個(gè)el-col就表示有幾列。列的寬度用span來規(guī)定。表示你這列占這一行24份中的幾份。
注意：
el-row中只有1個(gè)el-col的時(shí)候，el-col的span可以不用寫，它默認(rèn)占一行的24份，但是el-row有多個(gè)el-col的時(shí)候，el-col必須要寫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>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談Vue路由快照實(shí)現(xiàn)思路及其問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue圖片加載失敗時(shí)用默認(rèn)圖片替換的方法
這篇文章主要給大家介紹了關(guān)于vue圖片加載失敗時(shí)用默認(rèn)圖片替換的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue如何使用AIlabel標(biāo)注組件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要探討了 Vue 3 中父子組件之間的通信方式,包括父?jìng)髯?通過props傳遞數(shù)據(jù)和方法；子傳父,用emit觸發(fā)自定義事件并傳遞數(shù)據(jù)；還介紹了使用ref直接操作子組件實(shí)例,借助defineExpose暴露子組件的屬性和方法給父組件,需要的朋友可以參考下2025-01-01
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹
這篇文章主要為大家詳細(xì)介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue中的rules表單校驗(yàn)規(guī)則使用方法示例詳解 :rules=“rules“
這篇文章主要介紹了vue中的rules表單校驗(yàn)規(guī)則使用方法示例詳解 :rules=“rules“,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
淺析vue偵測(cè)數(shù)據(jù)的變化之基本實(shí)現(xiàn)
這里涉及到Vue一個(gè)重要特性：響應(yīng)式系統(tǒng)。數(shù)據(jù)模型只是普通的 JavaScript對(duì)象，當(dāng)我們修改時(shí)，視圖會(huì)被更新，而變化偵測(cè)是響應(yīng)式系統(tǒng)的核心2021-06-06
vue3配置代理實(shí)現(xiàn)axios請(qǐng)求本地接口返回PG庫(kù)數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了vue3配置代理實(shí)現(xiàn)axios請(qǐng)求本地接口返回PG庫(kù)數(shù)據(jù)的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2025-03-03
Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列
這篇文章主要介紹了Vue2?響應(yīng)式系統(tǒng)之異步隊(duì)列，文章基于Vue2?的相關(guān)資料展開對(duì)主題的詳細(xì)介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-04-04
這篇文章主要介紹了Vue-router中path的設(shè)置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02