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官网，栅格布局方式）

错误代码结构

修改结构

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

深入浅析nuxt.js基于ssh的vue通用框架
Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构的抽象组织， Nuxt.js 主要关注的是应用的 UI渲染,需要的朋友可以参考下
2019-05-05
Vue实现图片预览功能的详细指南
在现代 web 应用程序中,图片预览功能提升了用户体验,使用户可以在上传图片之前查看图片内容,本文将详细介绍如何在 Vue.js 应用中实现图片预览功能,包括基本实现、进阶功能、与 Element UI 的集成、常见优化技巧以及与其他库的结合使用,需要的朋友可以参考下
2024-09-09
搭建vscode+vue环境的详细教程
这篇文章主要介绍了搭建vscode+vue环境的详细教程,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-08-08
Vue设置select下拉框的默认选项详解(select空白bug解决)
最近开始学习vue,在学习的过程中遇到的问题将记录在这里,下面这篇文章主要给大家介绍了关于Vue设置select下拉框的默认选项(select空白bug解决)的相关资料,需要的朋友可以参考下
2022-12-12
vue中ref和$refs获取元素dom、获取子组件数据与方法调用示例
在Vue3中要获取子组件的DOM节点,你可以使用ref来引用子组件,然后通过$refs来访问子组件的DOM,下面这篇文章主要给大家介绍了关于vue中ref和$refs获取元素dom、获取子组件数据与方法调用的相关资料,需要的朋友可以参考下
2024-07-07
Vue.js结合bootstrap前端实现分页和排序效果
这篇文章主要为大家详细介绍了Vue.js结合bootstrap 前端实现分页和排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
vue3中标签form插件的使用教程详解
这篇文章主要为大家详细介绍了vue3中标签form插件的使用的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以了解下
2024-01-01
vue多种弹框的弹出形式的示例代码
本篇文章主要介绍了vue多种弹框的弹出形式的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue多页面项目开发实战指南
一般我们的vue项目都是单页面的,其实因为vue在工程化开发的时候依赖了webpack,webpack帮我们将所有的资源整合到一起而形成一个单页面,下面这篇文章主要给大家介绍了关于vue多页面项目开发的相关资料,需要的朋友可以参考下
2022-01-01
vue实现绑定事件的方法实例代码详解
这篇文章主要介绍了vue实现绑定事件的方法实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06