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官网，栅格布局方式）
错误代码结构
修改结构
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 Vuex 中,actions 的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,帮助您灵活应对各种需求,需要的朋友可以参考下2025-04-04
这篇文章主要介绍了vue中的数据双向绑定问题，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-05-05
这篇文章主要给大家介绍了关于vue通过video.js解决m3u8视频播放格式的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要介绍了Vue的土著指令和自定义指令的用法讲解 ,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue.js将时间戳转化为日期格式的实现代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
本篇文章主要介绍了如何理解Vue的.sync修饰符的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要给大家介绍了关于vue3.0公共组件自动导入的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue中async-await的使用误区,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-12-12
这篇文章主要为大家介绍了Vue应用qs插件实现参数格式化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家详细介绍了vue购物车插件的编写代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论