使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題
更新時間：2024年08月06日 09:03:28 作者：有夢想の程序猿
這篇文章主要介紹了使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
使用element-ui,el-row中的el-col數(shù)據(jù)為空頁面布局變亂
大家可能在使用el-row el-col進行布局的時候，可能會出現(xiàn)沒有數(shù)據(jù)，el-col沒有占位
如下圖1的情況
上圖2是代碼，在數(shù)據(jù)為空的時候。
下圖1為有數(shù)據(jù)之后
上圖2是加上數(shù)據(jù)之后的代碼，el-row el-col布局就沒問題了。
在數(shù)據(jù)為空的時候怎么可以讓布局不亂呢。
在網(wǎng)上查了好久，都是加css樣式
//第一種給一個最高度，讓它占位
.el-col{
min-height: 1px;
}
//第二種給一個透明的邊框，也是為了占位
.el-col{
border: 1px solid transparent;
}
上圖1和2為加入css還是沒有解決布局錯亂的問題。差評?。。?！
從上面解法看就是因為el-col為空所以帶來的問題，不管是加最小高度，還是給透明邊框都是為了占位，但占不滿還是會出現(xiàn)布局錯亂的問題。
解決方法
.el-row{
display:flex;
flex-wrap: wrap;
}
//加flex-wrap: wrap;因為有些人為了簡單，把所有的el-col放在一個el-row內(nèi)，如果只有display:flex;會把所有的el-col都擠在一行。加上flex-wrap: wrap;之后可以自動換行，和分開寫在el-row每一行的一樣。
上圖為效果圖。（僅為個人解法，也可能會有更好的?。?/p>
總結(jié)
布局可能不怎么好看為了方便大家對比，就把瀏覽器改成手機模式截圖，大家學(xué)一個方法就好！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了使用Vue3封裝一個通用echarts組件詳解的相關(guān)知識,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要介紹了Vue-Router-添加全局$router屬性,在 Vue 中有一個 mixin 方法，這個方法會在每個組件創(chuàng)建之前被調(diào)用，我們可以在這個方法中將 VueRouter 實例掛載到 Vue 實例上，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-11-11
這篇文章主要介紹了理解vue中的?slot-scope=“scope“，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章給大家介紹了vue組件創(chuàng)建和傳值的方法，創(chuàng)建組件有三種方法，文中給大家介紹的非常詳細，父組件傳值給子組件的方法，給大家介紹的也非常詳細，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了vue監(jiān)聽scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個參考，希望給有同樣經(jīng)歷的人幫助2017-09-09
這篇文章主要介紹了Vue3中使用pinia,本文通過示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章介紹了Vue發(fā)送ajax請求的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
這篇文章主要介紹了vuex實現(xiàn)的簡單購物車功能,結(jié)合實例形式分析了vuex購物車組件相關(guān)商品列表、購物車創(chuàng)建、添加、刪除、清空等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要為大家介紹了基于vue.js的QQ聊天室，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法
走馬燈功能在展示圖片時經(jīng)常用到,下面這篇文章主要給大家介紹了關(guān)于element-plus/element-ui走馬燈配置圖片及圖片自適應(yīng)的最簡便方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03