浏览器缩放，el-col表单布局错乱

于 2024-09-04 16:11:23 发布
阅读量331 收藏
点赞数 3
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen1780510/article/details/141896682
版权

问题：
el-form 中通过el-col布局，浏览器缩放原本在一行的el-form-item发生错位

解决方法：
el-row添加flex布局，设置flex-wrap:wrap即可。
<el-row :gutter="20" type="flex" style="flex-wrap:wrap">

alulu0921
关注
el-date-picker组件错位（溢出浏览器）解决
tang31415926的博客
02-18 6939
时间组件el-date-picker在弹窗中使用时，溢出页面，部分无法点击。
基于element-puls的el-image-viewer组件实现移动端单指拖拽和双指缩放功能
前端小伍的博客
06-29 1327
移动端单指拖拽和双指放大功能的实现，根据业务需求在预览组件上添加移动端的操作功能。
el-col布局错乱
Cloudem的博客
01-05 1384
将el-col全部放到el-row中，可能会出现分辨率或缩放、内容不同导致el-col高度不一致，而使布局异常。el-row添加flex布局，设置flex-wrap:wrap即可。
element表格在浏览器放大缩小情况下产生错位
qq_39039287的博客
09-18 3494
在谷歌浏览器中特有的问题，element框架中的带有border属性的表格，在电脑改变缩放与布局的比例和谷歌浏览器缩放页面的时候，表格会产生错位问题。 一般这种情况下，我们拉伸页面表格的错位有时候会恢复正常，所以从样式入手，在入口文件中index.html或者app.vue中加入全局的css样式： <style> .el-table--border th.gutter:last-of-type { display: block!important; width: 17px!importan.
el-col在浏览器放大缩小时高度产生小幅度变化问题
suom_的博客
05-27 1034
在上面的示例中，我们设置 el-row 为 flex 布局，然后将 el-col 样式中的 flex-shrink 设置为 0 ，这样就可以解决在浏览器放大缩小时 el-col 的高度发生变化的问题。该问题可以通过设置 flex 布局属性为 flex-shrink: 0;在使用 Vue 的 Element UI 的 el-col 栅格系统时，出现浏览器放大缩小时高度有变化的情况，可能是由于 flex 布局计算误差导致的。
element中布局el-col排序错乱
ingenuou_的博客
11-23 766
element中布局el-col排序错乱
解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题
Mr_Jule的博客
05-31 2092
解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题
vue2.0 el-dialog封装，修改源代码样式自适应屏幕浏览器，根据参数显示弹框位置左中右
qq_28813031的博客
12-30 1682
<!--作者：dingwangjun--> <!-- 界面描述：el-dialog弹出框。据需求传递参数,显示弹框的位置[左中右] --> <template> <el-dialog :customClass="[location=='左' ? 'dialogLeft' : location=='中'? 'dialogCenter' : 'dialogRight']" class="selfDialog" :visible.sync.
浏览器缩放检测的js代码
10-25
浏览器缩放检测的JS代码 浏览器缩放检测是web开发中一个重要的技术，涉及到浏览器的缩放检测、...浏览器缩放检测的JS代码是一个非常有用的技术，可以帮助开发者检测浏览器的缩放状态，实现响应式设计和自适应布局。
element卡片组件修改css(el-carousel)
March_Mango的博客
11-28 2865
内部实现逻辑是这样的: <el-carousel> <el-carousel__container> <el-carousel__item></el-carousel__item> </el-carousel__container> <el-carousel__indicators></el-carousel__indicators> </el-carousel&
使用elementUI的form表单校验时，错误提示位置异常解决方法
最新发布
xuelong的博客
05-22 1056
最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图
el-from表单验证时格式错乱解决方法
bootsboy的博客
10-27 697
el-form触发验证规则后格式错乱
vue的el-dialog弹窗放大缩小
m0_70722541的博客
04-27 4566
3.在el-dialog弹窗里放一个图标，点击缩放图标进行放大缩小的切换。用el-dialog属性fullscreen实现弹窗的放大缩小。2.el-dialog标签上加上fullscreen属性。1.模板部分（template）2.js部分（script）
ElementUI 中 栅格布局 混乱问题
zouhuu的博客
07-24 2834
ElementUI中栅格布局混乱问题。
Element UI组件中el-col、el-row布局学习笔记
热门推荐
qq_56715703的博客
07-11 2万+
el-col：列。是Element UI布局中的核心组件，他的作用的将一行分成24个网格，为了方便我们在不同的设备上适配不同的屏幕大小。我们可以通过指定span属性来确定一行中所占的网格数。el-row：行。包裹在el-col外层，其中可以有无数个el-col。在正常形态下，:span默认为24。假如:span为12，那么就是原本列数的一半。二、el-row的属性：:gutter 调整布局之间的宽度---分栏间隔。（也就是两列之间的间隔距离）如果两个div间需要间隔以示区分。
Vue使用ElementUi表单多级级联时引发的表单错乱问题，闹心的Bug哪都有，这个最烦人
04-12 1727
其实这个问题出现的场景还是挺费心思的，因为业务需要，我们有一个多级表单的场景，而且某个表单可能会级联另一个表单域的出现或隐藏，而且我还使用了v-if判断....这就是最糟心的地方，大部分是因为v-if引起的表单错乱........我们的表单域样式：表单域代码：下面是基本上修好了，将v-if替换为v-show就好了大部分了： 出现问题的样式：当我选择OPRF的时候，就会出现级联关系，并且触发表单校验，这是有问题的时候样式，代码我就不贴了： 1.当使用过级联关系后的表单，点击取消之后，再次单击创建任务，表单
element plus el-form双列布局及拓展任意布局
无心使然云中漫步
01-10 5073
布局和数据分离灵活扩展layout2.1 可以建立多个layout文件，批量引入（或动态引入）Form.vue中 ，Form.vue中利用动态组件component加载各个layout文件2.2 可以建立多个layout文件，批量引入（或动态引入）LayoutIndex.vue文件中，LayoutIndex.vue文件利用动态组件component加载各个layout文件，然后Form.vue中只渲染LayoutIndex，同时通过传参决定渲染那个layout。
element表单搜索框与表格高度自适应
qq_43145310的博客
02-12 1893
表单搜索框与表格高度自适应
el-row flex布局 cl-col每行两列 每行两个卡片 每个卡片里一个charts图表支持放大缩小 要求卡片一样大 支持浏览器缩放
06-10
您好！针对您的问题，可以使用以下代码实现： HTML 代码： ```html <div class="el-row"> <div class="el-col"> <div class="card"> <div class="chart"></div> </div> <div class="card"> <div class="chart"></div> </div> </div> <div class="el-col"> <div class="card"> <div class="chart"></div> </div> <div class="card"> <div class="chart"></div> </div> </div> </div> ``` CSS 代码： ```css .el-row { display: flex; flex-wrap: wrap; } .el-col { display: flex; flex: 1; } .card { flex: 1; margin: 10px; padding: 10px; background-color: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.2); } .chart { width: 100%; height: 100%; } @media screen and (max-width: 768px) { .el-row { flex-direction: column; } } ``` 解释一下上面的代码： - 使用 `display: flex` 设置 `.el-row` 的布局为 flex 布局。 - 使用 `flex-wrap: wrap` 让 `.el-row` 中的子元素能够自动换行。 - 使用 `display: flex` 设置 `.el-col` 布局为 flex 布局。 - 使用 `flex: 1` 让每个 `.el-col` 占据相同的宽度。 - 使用 `flex: 1` 让每个 `.card` 占据相同的高度。 - 使用 `@media` 媒体查询实现在小屏幕下，`.el-row` 的布局变为垂直方向。 至于支持放大缩小的图表部分，可以使用第三方的图表库，例如 echarts，highcharts 等，这些库都支持放大缩小功能，并且可以通过 API 实现自适应浏览器缩放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值