大家可能在使用el-row el-col进行布局的时候,可能会出现没有数据,el-col没有占位,如下图1的情况:
上图2是代码,在数据为空的时候。下图1为有数据之后:
上图2是加上数据之后的代码,el-row el-col布局就没问题了。
在数据为空的时候怎么可以让布局不乱呢。
在网上查了好久,都是加css样式
//第一种给一个最高度,让它占位
.el-col{
min-height: 1px;
}
//第二种给一个透明的边框,也是为了占位
.el-col{
border: 1px solid transparent;
}
上图1和2为加入css还是没有解决布局错乱的问题。差评!!!!
从上面解法看就是因为el-col为空所以带来的问题,不管是加最小高度,还是给透明边框都是为了占位,但占不满还是会出现布局错乱的问题。
解决方法!
.el-row{
display:flex;
flex-wrap: wrap;
}
//加flex-wrap: wrap;因为有些人为了简单,把所有的el-col放在一个el-row内,如果只有display:flex;会把所有的el-col都挤在一行。加上flex-wrap: wrap;之后可以自动换行,和分开写在el-row每一行的一样。
上图为效果图。(仅为个人解法,也可能会有更好的!)
布局可能不怎么好看为了方便大家对比,就把浏览器改成手机模式截图,望大家学一个方法就好!