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