使用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每一行的一样。
上图为效果图。（仅为个人解法，也可能会有更好的！）
总结
布局可能不怎么好看为了方便大家对比，就把浏览器改成手机模式截图，大家学一个方法就好！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue2中Print.js的使用超详细讲解（pdf、html、json、image）
项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用（pdf、html、json、image）的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章介绍了Vue.js中v-bind指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue3中的父子组件通讯详情，文章以传统的props展开主题相关资料内容，具有一定参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要给大家介绍了关于uniapp微信小程序axios库的封装及使用的相关资料,Axios是一个基于promise网络请求库,作用于node.js和浏览器中axios-miniprogram-adapteraxios的小程序适配器,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue.js—定义全局变量、函数的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue3组件的v-model:value与v-model的区别解析
在Vue3中,v-model和v-model:value都是用于实现双向数据绑定的语法糖,但v-model:value提供了更显式和灵活的绑定方式,允许你明确指定绑定的属性名和事件名,它们的主要区别在于默认行为、灵活性、多模型绑定和使用场景,感兴趣的朋友一起看看吧2025-02-02
今天小编就为大家分享一篇解决axios post 后端无法接收数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要给大家介绍了关于Vue3中watchEffect用途的相关资料, watch和watchEffect都是监听器,但在写法和使用上有所区别,本文进行了详细的介绍,需要的朋友可以参考下2021-07-07
这篇文章通过实例代码给大家介绍了vue-父子组件传值和ref获取dom和组件的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
element日期选择器el-date-picker样式图文详解
最近写的项目里面有一个功能是日期选择功能,第一反应是使用element里面的el-date-picker组件,下面这篇文章主要给大家介绍了关于element日期选择器el-date-picker样式的相关资料,需要的朋友可以参考下2022-09-09
最新评论