使用element-ui,el-row中的el-col数据为空页面布局变乱问题

使用element-ui,el-row中的el-col数据为空页面布局变乱

大家可能在使用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每一行的一样。

上图为效果图。（仅为个人解法，也可能会有更好的！）

总结

布局可能不怎么好看为了方便大家对比，就把浏览器改成手机模式截图，大家学一个方法就好！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。