使用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每一行的一样。
上图为效果图。（仅为个人解法，也可能会有更好的！）
总结
布局可能不怎么好看为了方便大家对比，就把浏览器改成手机模式截图，大家学一个方法就好！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue中this.$emit和this.$on的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了vue-router中query和params的区别 ,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了Antd form表单的使用、设值、取值、清空值方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue2如何获取上页的url地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue3使用ref解决GetElementById为空的问题
今天遇到一个问题,就是在Vue3组件中需要获取template中的元素节点,使用GetElementById返回的却是null,网上查找了好些资料,才发需要使用ref,所以本文给大家介绍了Vue3组件中如何使用ref解决GetElementById为空的问题,需要的朋友可以参考下2023-12-12
本篇文章中主要介绍了Vue中img的src属性绑定与static文件夹实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-05-05
Vue中使用 setTimeout() setInterval()函数的问题
这篇文章主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下2018-09-09
vue的el-select绑定的值无法选中el-option问题及解决
这篇文章主要介绍了vue的el-select绑定的值无法选中el-option问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本篇介绍directive的简单实现，主要学习其实现的思路及代码的设计，需要的朋友参考下吧2018-01-01
这篇文章主要介绍了Vue使用预渲染代替SSR的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论