elementui中el-row的el-col排列混乱问题及解决
更新时间：2024年08月07日 09:08:19 作者：前端菜鸟。
这篇文章主要介绍了elementui中el-row的el-col排列混乱问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
el-row中el-col排列混乱
解决方案
将el-row中元素改为flex布局
设置flex-wrap: wrap，避免el-row中元素span之和超过24时挤在一行
.el-row{
display:flex;
flex-wrap: wrap;
}el-col和el-row结合el-form,位置错乱问题
el-row和el-col配合el-form 出现排版错乱
问题表现
el-col的内容为空，正常；el-col的内容不一样，回显时，有时正常，有时错乱
问题原因
el-row和el-col的中的span元素之和超过了24的时候，就会出现排版错乱（可见elemet官网，栅格布局方式）
错误代码结构
修改结构
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 Vue 中,深度监听是指监听一个对象或数组的嵌套属性（深层结构）的变化,而不仅仅是监听顶层属性的引用变化,本文给大家介绍了如何在Vue中实现深度监听,并通过代码示例介绍的非常详细,需要的朋友可以参考下2025-03-03
下面小编就为大家分享一篇vue中实现methods一个方法调用另外一个方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Lambda函数,也称为匿名函数,是Vue3中的一种函数类型,绑定匿名方法和绑定普通方法主要是写法上的区别,其他的区别并不是很大,本文主要介绍了Vue3中使用匿名函数的方法实现,感兴趣的可以了解一下2023-12-12
这篇文章主要为大家详细介绍了Vue实现简单的跑马灯，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
这篇文章主要介绍了vue-cli随机生成port源码的方法，文中给大家介绍了vue 随机色生成方法,需要的朋友可以参考下2019-09-09
在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的，这篇文章主要介绍了vue 过滤、模糊查询（计算属性 computed）,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue github用户搜索案例分享，文章基于Vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-04-04
这篇文章主要给大家介绍了关于如何基于vue3开发mobile-table适用于移动端表格的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Vue.js 中 axios 跨域访问错误问题及解决方法，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-11-11
最新评论