使用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>
總結
布局可能不怎么好看為了方便大家對比，就把瀏覽器改成手機模式截圖，大家學一個方法就好！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue2中Print.js的使用超詳細講解（pdf、html、json、image）
項目中有用到打印功能,網(wǎng)上就找了print.js,下面這篇文章主要給大家介紹了關于vue2中Print.js使用（pdf、html、json、image）的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-03-03
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了vue3中的父子組件通訊詳情，文章以傳統(tǒng)的props展開主題相關資料內(nèi)容，具有一定參考價值，需要的小伙伴可以參考一下2022-06-06
這篇文章主要給大家介紹了關于uniapp微信小程序axios庫的封裝及使用的相關資料,Axios是一個基于promise網(wǎng)絡請求庫,作用于node.js和瀏覽器中axios-miniprogram-adapteraxios的小程序適配器,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue.js—定義全局變量、函數(shù)的方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3組件的v-model:value與v-model的區(qū)別解析
在Vue3中,v-model和v-model:value都是用于實現(xiàn)雙向數(shù)據(jù)綁定的語法糖,但v-model:value提供了更顯式和靈活的綁定方式,允許你明確指定綁定的屬性名和事件名,它們的主要區(qū)別在于默認行為、靈活性、多模型綁定和使用場景,感興趣的朋友一起看看吧2025-02-02
解決axios post 后端無法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無法接收數(shù)據(jù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要給大家介紹了關于Vue3中watchEffect用途的相關資料, watch和watchEffect都是監(jiān)聽器,但在寫法和使用上有所區(qū)別,本文進行了詳細的介紹,需要的朋友可以參考下2021-07-07
這篇文章通過實例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項目里面有一個功能是日期選擇功能,第一反應是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關于element日期選擇器el-date-picker樣式的相關資料,需要的朋友可以參考下2022-09-09