【问答】el-col随页面比例自动改变位置问题

于 2023-08-21 15:29:18 发布
阅读量394 收藏
点赞数
文章标签： elementui html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/justsoso_o/article/details/132409230
版权
文章讨论了在使用VueElementUI中的el-col组件时，如何使其随页面比例变化自动调整位置的问题，寻求解决方案。作者提到理想状态是始终保持居左显示，但在某些情况下存在问题。
摘要由CSDN通过智能技术生成

el-col随页面比例自动改变位置问题！！！求大佬帮忙

<el-col :span="12" class="margin0" style="margin-left: 0">
     <el-form-item label="Report or not" prop="presentation">
        ... 有内容的部分
     </el-form-item>
</el-col>
<el-col :span="12" style="margin: 0">
     <el-form-item label="Cost" prop="expenses">
     ... 有内容的部分
    </el-form-item>
</el-col>

正常情况（理想效果是一直保持居左）：
在这里插入图片描述

出现问题： 在这里插入图片描述

justsoso_o
关注
element的el-table中记录滚动条位置的示例代码
10-16
在本篇示例代码中，将重点介绍如何在Element UI的el-table组件中记录和恢复滚动条位置。 通常情况下，直接通过JavaScript的`scrollTop`属性赋值来控制滚动条位置，这种方法简单直接。但在一些特定的场景下，例如在...
el-col布局错乱
Cloudem的博客
01-05 1393
将el-col全部放到el-row中，可能会出现分辨率或缩放、内容不同导致el-col高度不一致，而使布局异常。el-row添加flex布局，设置flex-wrap:wrap即可。
el-col在浏览器放大缩小时高度产生小幅度变化问题
suom_的博客
05-27 1037
在上面的示例中，我们设置 el-row 为 flex 布局，然后将 el-col 样式中的 flex-shrink 设置为 0 ，这样就可以解决在浏览器放大缩小时 el-col 的高度发生变化的问题。该问题可以通过设置 flex 布局属性为 flex-shrink: 0;在使用 Vue 的 Element UI 的 el-col 栅格系统时，出现浏览器放大缩小时高度有变化的情况，可能是由于 flex 布局计算误差导致的。
Element-ui学习笔记1
weixin_33860553的博客
06-11 1124
1.col,row布局注意事项 el-row el-col gutter就是css，span的时候宽度是按boder-box来计算。 将type属性赋值为 'flex'，可以启用 flex 布局，并可通过justify属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式 xs、sm、md、lg和...
兄弟元素之间动态切换class样式
Sunny_lxm的博客
12-29 1641
之前记录了一个v-for循环的动态切换class，现在记录一个非循环的 一、（非循环）html代码 其中shows四在data中定义的一个初始值，我所定义的-1是，初始状态谁都不选中，如果想初始状态是选中的就直接shows=1/shows=2就可以了 （二、循环元素） 效果如图 数值是动态复制的 html: <template v-for="tab in ta...
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间需要间隔以示区分。
Element el-row el-col 布局组件详解
热门推荐
程序员大阳
01-27 12万+
1. 背景 element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。 区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。 2. 分栏布局 首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。 如下代码，即为将1行等分为2列，为了便于区分列，我们为列
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
解决vue中el-tab-pane切换的问题
10-15
首先，问题出现在当用户在不同数量的`el-tab-pane`之间切换时，`el-dialog`可能会保持之前的状态，这通常是由于组件没有正确地重置或销毁导致的。为了解决这个问题，我们可以采用以下策略： 1. **给每个`el-tab-...
改变el-table宽度
12-12
`:width`的值来自`tableColumn`对象，通过`tableColumn['tab-table-1'][索引]`获取，这里的`'tab-table-1'`是表格ID，索引对应于`el-table-column`在`tableColumn`数组中的位置。 在`mounted`生命周期钩子中，`...
Element-ui中元素滚动时el-option超出元素区域的问题
10-16
在Element-ui中，el-option元素在用户滚动时超出其父元素区域的问题是一个常见的困扰开发者的问题。这通常是由于Element-ui的下拉菜单（dropdown）组件，即el-select与el-option的交互方式导致的。Element-ui的el-...
el-table根据容器大小自适应滚动条-修改滚动条样式
请叫我欧皇！的博客
08-18 1345
需求：父容器里有多个容器为上下级，之后浏览器在缩放的时候，上面容器高度改变了，所以el-table被挤压，如果el-table设置的是固定的高度，那么挤压后内容超出父容器，本文章就是解决这个问题不自适应错误用法：浏览器伸缩挤压后元素超出了。
vue固定比例16:9自适应方法（vue2，vue3）
哆啦A梦的百宝袋的博客
07-07 1083
主要是针对页面宽高进行监听，检测最短边，并以最短边去适配16:9比例的页面元素。通常用于pc需要适配大屏和一些后台管理方面的项目。
使用el-row、el-col时出现布局错乱问题
gzy5201314的博客
08-03 1245
使用el-row、el-col时出现布局错乱问题，如下图： 解决方式，el-row添加 type=“flex” style=“flex-wrap:wrap”：
element表单搜索框与表格高度自适应
qq_43145310的博客
02-12 1905
表单搜索框与表格高度自适应
element行内表单因显示分辨率不同换行显示问题
xiao_fei_yang_的博客
03-05 2573
为行内表单每个 .el-form-item设置固定宽度，然后对form使用flex布局的样式，再分辨率小的情况自动换行。 html代码： css样式：
浏览器缩放不影响元素的位置
正一品程序员的博客
07-14 821
【代码】浏览器缩放不影响元素的位置。
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
草巾冒小子的博客
03-12 1万+
这里截图为例说明一则bug，请bug对号入座。 页面的栅格缩放，导致页面布局发生叠加错位？ 一、坑1 · 引言： （先来一则bug代码） &amp;amp;amp;lt;el-card v-for=&amp;amp;quot;(resume,key) in resumes&amp;amp;quot; :key=&amp;amp;quot;key&amp;amp;quot; class=&amp;amp;quot;item&amp;am
el-col不自适应的问题
tianbinbetter1_的专栏
04-02 5651
使用el-col定义span属性时，不同分辨率的宽度会有所变化，样式不好，体验很不好，笔者进行如下解决： 弃用el-col，改用div； 定义父元素div属性，设置display为flex， 定义两个同行子元素的div，然后设置其宽度。 解决：下面代码： <div style="display:flex"> <div style="width:10%">内容1 </div> <div style="width:80%"> 内容2</div&
el-row el-col导致页面空白
最新发布
08-24
在Vue.js中，`el-row` 和 `el-col` 是Element UI库中的栅格系统组件，用于创建响应式的布局。如果使用它们构建网页时遇到页面空白的情况，可能是以下几个原因： 1. 组件嵌套问题：确保每一行 (`el-row`) 内正确包含了列 (`el-col`)，并且列的数量和宽度设置正确。例如，`<el-row><el-col :span="8"></el-col></el-row>`。 2. 样式冲突：检查是否有其他样式覆盖了元素，如全局CSS或其他组件的样式表，可能导致高度、display等属性设置不当。 3. 父级容器的高度：如果没有给包含 `el-row` 的容器设置高度，它默认高度可能会为0，导致内容隐藏。可以尝试添加 `height` 或 `flex-shrink: 0;` 来解决这个问题。 4. 数据绑定错误：如果 `el-col` 的宽度基于数据动态计算，确保数据已正确赋值并且计算过程无误。 5. 组件状态：确认所有的Vue实例都已经正确初始化，并且在适当的时候挂载到DOM上。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值