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

最新推荐文章于 2024-03-12 11:37:51 发布
最新推荐文章于 2024-03-12 11:37:51 发布
阅读量777 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45652891/article/details/134734892
版权

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

网页粉刷匠_Mao
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
二次封装el-form组件
06-08
常用的列表页头部的表单查询
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
elementui中el-row的el-col排列混乱
热门推荐
Zhang's Blog
02-18 1万+
问题: el-row中el-col排列混乱 解决方案： 将el-row中元素改为flex布局 设置flex-wrap: wrap，避免el-row中元素span之和超过24时挤在一行 .el-row{ display:flex; flex-wrap: wrap; }
使用el-row、el-col时出现布局错乱问题
gzy5201314的博客
08-03 1044
使用el-row、el-col时出现布局错乱问题，如下图： 解决方式，el-row添加 type=“flex” style=“flex-wrap:wrap”：
el-form表单结合el-row循环数组，动态添加prop，最后进行表单验证
最新发布
MtangEr的博客
03-12 621
el-form表单结合el-row循环数组，动态添加prop，最后进行表单验证
element-ui 动态表单实现一行两列
m0_67273584的博客
08-11 2504
参考element-ui的文档,再用el-row与el-col相结合实现动态表单一行两列功能
elementui//el-form 中 input 框没有对其的原因 el-row 用了 :gutter。改用 &nbsp；
weixin_37877794的博客
09-12 1268
el-form 中 input 框没有对其的原因 el-row 用了 :gutter。改用 &nbsp; 修改后： 不用 :gutter。改用 &nbsp; <el-form-item v-for="(item, index) in form.value" :label="`字典${index + 1}`" :key="item.id" :prop="`value.${$index}`
element-ui，使用el-row、el-col布局页面布局变乱
前端小鱼
11-16 6375
elementui el-col布局错乱
el-row和el-col出现排版错乱
weixin_47509924的博客
02-23 3219
element 的el-row排版错乱问题
form表单中使用el-row布局 input表单与父元素不同宽
A_Common_Man的博客
06-14 756
form表单中使用el-row布局 时 input表单与父元素不同宽 ， 导致缩放页面的时候不能响应式布局
el-row排列出错
qq_51586463的博客
02-25 718
el-row中正常使用el-col,结果却是空出来一部分
element form表单组件二次封装
皮皮的博客
10-19 379
element form表单组件二次封装
Element-UI 使用el-row 分栏布局的教程
01-18
使用多个卡片显示的时候，并且要求当列数到一定数目的时候，要自动换行，el-container 布局就满足了需求了，就要用到el-row 布局做分栏处理， 代码如下 <div slot=header
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-form 多层级表单的实现示例
10-14
主要介绍了el-form 多层级表单的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-form-renderer:data数据驱动的动态复杂表格解决方案
04-28
形式呈现器目录灵感贡献贡献者执照 介绍 什么el-form-renderer基于element-ui ，但不限于element-ui组件。 在完全继承element-ui的form属性的基础上，进行了扩展。 一些非形式的组件或自定义组件（例如图片上传和RTF...
el-form里面表单遍历渲染，里面放el-row,一行放3个表单怎么实现
小韩要快乐！
02-27 819
el-form里面表单遍历渲染，里面放el-row,一行放3个表单怎么实现
el-row错位问题解决
weixin_38999134的博客
11-30 203
【代码】el-row错位问题解决。
el-row和el-col多层嵌套
05-31
在 Element UI 中，`el-row` 和 `el-col` 可以多层嵌套使用，实现更加复杂的布局。例如，可以通过多层嵌套实现两列布局中，左侧固定宽度，右侧自适应宽度的效果。 下面是一个示例代码，展示了如何使用多层嵌套的 `el-row` 和 `el-col` 实现这个效果： ```html <template> <el-row> <el-col :span="6"> <div class="left">左侧固定宽度</div> </el-col> <el-col :span="18"> <el-row> <el-col :span="8"> <div class="right">右侧自适应宽度</div> </el-col> <el-col :span="8"> <div class="right">右侧自适应宽度</div> </el-col> <el-col :span="8"> <div class="right">右侧自适应宽度</div> </el-col> </el-row> </el-col> </el-row> </template> <script> export default { data() { return {} } } </script> <style scoped> .left { width: 200px; height: 100px; background-color: #ccc; } .right { height: 100px; background-color: #ddd; margin: 10px; } </style> ``` 在这个示例中，外层的 `el-row` 表示整个布局的行，其中包含两个 `el-col`，分别表示左侧固定宽度区域和右侧自适应宽度区域。右侧自适应宽度的区域再次使用了 `el-row` 和 `el-col` 进行多层嵌套，实现了三列等宽的布局。 注意，在多层嵌套的情况下，需要根据具体情况来设置 `span` 属性，以实现合适的布局效果。同时，也需要注意多层嵌套可能会导致布局嵌套层级过深，对页面的性能和维护带来不利影响。因此，在实际开发中，应根据具体情况来选择合适的布局方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值