el-col和el-row结合el-form,位置错乱问题

最新推荐文章于 2025-04-23 19:45:00 发布
最新推荐文章于 2025-04-23 19:45:00 发布
阅读量1.9k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45652891/article/details/134734892
文章讨论了在VueElementUI中，el-row和el-col结合el-form使用时遇到的排版混乱问题，尤其是在span元素总和超过24时。问题可能出现在回显阶段，解决方法涉及检查并调整元素结构以适应栅格布局规范。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

el-row和el-col配合el-form 出现排版错乱
问题表现：el-col的内容为空，正常；el-col的内容不一样，回显时，有时正常，有时错乱
问题原因：el-row和el-col的中的span元素之和超过了24的时候，就会出现排版错乱（可见elemet官网，栅格布局方式）
在这里插入图片描述
错误代码结构
在这里插入图片描述
修改结构
在这里插入图片描述

el-form 使用el-row el-col对齐 注意事项
帅的博客
05-24 403
el-form 使用el-row el-col对齐 注意事项
el-row和el-col出现排版错乱
weixin_47509924的博客
02-23 3885
element 的el-row排版错乱问题
el-row配合el-col出现排版错乱
h_未来可期_的博客
04-23 353
【代码】el-row配合el-col出现排版错乱。
a-form-model表单在a-row和a-col布局下，布局动态改变，校验失效问题。
weixin_40992252的博客
05-25 876
解决：给表单添加key，每次布局改变，更新key。
Element-UI el-row 排版样式错乱
weixin_45849417的博客
10-30 1669
Element-UI el-row el-col 配合el-form 表单使用，造成样式的错乱。
浏览器缩放，el-col表单布局错乱
chen1780510的博客
09-04 546
el-form 中通过el-col布局，浏览器缩放原本在一行的el-form-item发生错位。添加flex布局，设置flex-wrap:wrap即可。
el-col布局错乱
Cloudem的博客
01-05 1786
将el-col全部放到el-row中，可能会出现分辨率或缩放、内容不同导致el-col高度不一致，而使布局异常。el-row添加flex布局，设置flex-wrap:wrap即可。
使用el-row、el-col时出现布局错乱问题
gzy5201314的博客
08-03 1522
使用el-row、el-col时出现布局错乱问题，如下图： 解决方式，el-row添加 type=“flex” style=“flex-wrap:wrap”：
el-row + el-form表单里的item项样式错位
u010328533的博客
01-30 1339
elementui,样式
<el-form ref="dataForm" :model="dataForm" label-width="80px"> <el-row :gutter="20"> <el-col :span="16"> <el-form-item label="角色名称" prop="roleName" > <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input> </el-form-item> </el-col> <el-col :span="16"> <el-form-item label="角色编码" prop="roleCode" > <el-input v-model="dataForm.roleCode" placeholder="角色编码"></el-input> </el-form-item> </el-col> <el-col :span="16"> <el-form-item label="角色类型" prop="roleType" > <el-input v-model="dataForm.roleType" placeholder="角色类型"></el-input> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="排序" prop="sortCode" > <el-input-number :min="0" :max="999999" v-model="dataForm.sortCode" controls-position="left"/> </el-form-item> </el-col> </el-row> </el-form> 当前vue2代码中 <el-input-number :min="0" :max="999999" v-model="dataForm.sortCode" controls-position="left"/>没有跟其他的对齐, 如何调整
03-29
嗯，用户问的是如何让`<el-input-number>`和其他输入框对齐。首先，我需要理解他们的问题。...- 通过 `el-row` 和 `el-col` 实现响应式布局 通过上述调整，可确保表单控件在布局和视觉上保持高度一致性。
el-form手动响应式，编写，不用el-col，
最新发布
08-07
在不使用 `el-col` 的情况下实现 `el-form` 的手动响应式布局，可以通过自定义 CSS 样式结合 `el-form-item` 的结构...该方法避免了 `el-row` 和 `el-col` 可能导致的布局错乱问题，并提供了更高的灵活性和控制能力。
el-row el-col实现一行5列 span=5 却换行了
03-29
嗯，用户在使用Element-UI的el-row和el-col布局时，想实现一行五列，但出现了换行的问题。首先，我得回忆一下Element-UI的栅格系统是怎么工作的。Element-UI的栅格是基于24列的，所以每个el-col的span总和如果超过24...
vue2 element ui v-form + el-col <el-col :span="12"> 在谷歌历览器上的弹窗上展示时，某一行本来应该在居右的<el-col :span="12"> 确在左边，右边的空出来了，其他浏览器及本地都是好的
06-27
我们正在处理一个Vue2和ElementUI的布局问题，具体是在GoogleChrome浏览器中，当使用el-form和el-col布局时，在弹出对话框（dialog）中，el-col的居右显示异常。问题描述：在弹出对话框中，使用el-col进行布局，期望...
el-row里面是两个el-form-item，怎么让一行显示
07-31
在使用 Element UI 时，若希望 `el-form-item` 能够在同一行显示，可以通过 `el-row` 和 `el-col` 的栅格系统进行布局控制。Element UI 提供了基于 24 列的栅格系统，通过 `el-col` 的 `span` 属性来控制每个表单项...
使用element-ui，el-row中的el-col数据为空页面布局变乱
热门推荐
有梦想の程序猿的博客
08-20 1万+
大家可能在使用el-row el-col进行布局的时候，可能会出现没有数据，el-col没有占位，如下图1的情况： 　 上图2是代码，在数据为空的时候。下图1为有数据之后： 　 上图2是加上数据之后的代码，el-row el-col布局就没问题了。 在数据为空的时候怎么可以让布局不乱呢。 在网上查了好久，都是加css样式 //第一种给一个最高度，让它占位 .el-col{ min-height: 1px; } //第二种给一个透明的边框，也是为了占位 .el-col{ bor
el-form结合el-row 和el-col的用法
weixin_46631078的博客
07-08 1117
【代码】el-form结合el-row 和el-col的用法。
el-row排列出错
qq_51586463的博客
02-25 1024
el-row中正常使用el-col,结果却是空出来一部分
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值