Element-UI使用el-row高度设置方式
更新时间：2024年08月06日 08:42:32 作者：清雨未尽时
这篇文章主要介绍了Element-UI使用el-row高度设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Element-UI 使用el-row 高度设置
使用el-row 布局列数多个时候，出现了高度不适应且排列混乱 的问题
处理办法在 el-row 布局属性上加入
<el-row :gutter="20" class="el-row">
.el-row {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap
}
.el-card {
min-width: 100%;
height: 100%; 高度要设置百分比才可以
margin-right: 20px;
transition: all .5s;
}设置完成后
el-row和el-col在element ui中的注意点
el-row是将一行分成24份。代表一行。
el-row中写el-col，el-col代表的是列，写几个el-col就表示有几列。列的宽度用span来规定。表示你这列占这一行24份中的几份。
注意：
el-row中只有1个el-col的时候，el-col的span可以不用写，它默认占一行的24份，但是el-row有多个el-col的时候，el-col必须要写span
注意：
不管el-row里嵌套多少el-row,el-row都代表24份
//第1层的el-row表示1行，这行分成24份
//父元素
<el-row>
<el-col>
//下面这个el-row是子元素，但是它也是一行，这一行有24份
<el-row>
//下面的el-col，这一列，要想占满这行，就是占24份,span要为24才行，记住，el-row表示24份
<el-col :span="24"></el-col>
</el-row>
</el-col>
</el-row>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了浅谈Vue路由快照实现思路及其问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要给大家介绍了关于vue图片加载失败时用默认图片替换的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-08-08
这篇文章主要介绍了vue如何使用AIlabel标注组件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要探讨了 Vue 3 中父子组件之间的通信方式,包括父传子,通过props传递数据和方法；子传父,用emit触发自定义事件并传递数据；还介绍了使用ref直接操作子组件实例,借助defineExpose暴露子组件的属性和方法给父组件,需要的朋友可以参考下2025-01-01
这篇文章主要为大家详细介绍了vue使用拖拽方式创建结构树，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
vue中的rules表单校验规则使用方法示例详解 :rules=“rules“
这篇文章主要介绍了vue中的rules表单校验规则使用方法示例详解 :rules=“rules“,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这里涉及到Vue一个重要特性：响应式系统。数据模型只是普通的 JavaScript对象，当我们修改时，视图会被更新，而变化侦测是响应式系统的核心2021-06-06
这篇文章主要为大家详细介绍了vue3配置代理实现axios请求本地接口返回PG库数据的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2025-03-03
这篇文章主要介绍了Vue2 响应式系统之异步队列，文章基于Vue2 的相关资料展开对主题的详细介绍，具有一定的参考价值需要的小伙伴可以参考一下2022-04-04
这篇文章主要介绍了Vue-router中path的设置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
最新评论