使用element-ui,el-row中的el-col数据为空页面布局变乱问题
更新时间：2024年08月06日 09:03:28 作者：有梦想の程序猿
这篇文章主要介绍了使用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每一行的一样。
上图为效果图。（仅为个人解法，也可能会有更好的！）
总结
布局可能不怎么好看为了方便大家对比，就把浏览器改成手机模式截图，大家学一个方法就好！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了使用Vue3封装一个通用echarts组件详解的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了Vue-Router-添加全局$router属性,在 Vue 中有一个 mixin 方法，这个方法会在每个组件创建之前被调用，我们可以在这个方法中将 VueRouter 实例挂载到 Vue 实例上，本文给大家介绍的非常详细，需要的朋友可以参考下2023-11-11
这篇文章主要介绍了理解vue中的 slot-scope=“scope“，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章给大家介绍了vue组件创建和传值的方法，创建组件有三种方法，文中给大家介绍的非常详细，父组件传值给子组件的方法，给大家介绍的也非常详细，需要的朋友参考下吧2018-08-08
这篇文章主要介绍了vue监听scroll的坑的解决方法，现在分享给大家，也给大家做个参考，希望给有同样经历的人帮助2017-09-09
这篇文章主要介绍了Vue3中使用pinia,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章介绍了Vue发送ajax请求的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-01-01
这篇文章主要介绍了vuex实现的简单购物车功能,结合实例形式分析了vuex购物车组件相关商品列表、购物车创建、添加、删除、清空等相关操作技巧,需要的朋友可以参考下2019-02-02
这篇文章主要为大家介绍了基于vue.js的QQ聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
element-plus/element-ui走马灯配置图片及图片自适应的最简便方法
走马灯功能在展示图片时经常用到,下面这篇文章主要给大家介绍了关于element-plus/element-ui走马灯配置图片及图片自适应的最简便方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
最新评论