el-table在flex布局下，缩放浏览器会影响页面样式问题

已于 2024-10-22 16:01:05 修改
阅读量644 收藏 1
点赞数 8
CC 4.0 BY-SA版权
文章标签： vue.js javascript 前端
于 2024-09-06 15:27:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46573412/article/details/141960024

在flex布局下引用了el-table，平时习惯都是直接在el-form下跟着写。

本次书写的项目如下图所示。开发的时候根本没有注意到放大缩小后的样式问题。并且都做了自适应。

页面放大后，左边的样式已出现问题，回到100%后显示正常。

然而将页面缩小后再返回100%，就出现了问题

局部注释后一块一块查找，才发现是el-talbe影响了页面样式。

查阅资料后找到了相关解决方案：！！！给el-table套DIV盒子，并设置position属性

但感觉还有点问题，之后发现更好的解决办法会及时更新（已更新在最下方，不用设置position属性即可）

！！！经过开发实验找到了新的解决方式

给table套div盒子 

父级元素设置position：relative属性

table盒子设置宽高：height：100%  width：99% （99就没问题，100就会出问题 真的很神奇）

ElementUI el-table 在flex下的宽度自适应问题
qq_19694913的博客
07-21 1万+
BUG：在flex容器下面的一个flex:1的子容器里面写了个el-table用来展示列表数据，在做宽度自适应测试的时候发现该组件的宽度只会增加不会缩小。 Debug：通过控制台发现组件生成的table的宽度是动态计算的，翻查源码，发现以下代码段 // table.vue if (this.fit) { addResizeListener(this.$el, this.resizeLi...
使用flex布局，el-table自适应失效的问题
liusixsixsix的博客
06-08 1539
el-table 组件的宽度是动态计算的，源码中resize事件绑定在 this.$el 上，flex容器下的width:100%会一直向上继承，直到flex容器下第一级子元素，但是当某个子元素的宽度出现固定值并且大于flex伸展的宽度的时候，那么容器就不会收缩，也就触发不了resize事件了。在右侧区域，即 flex：1；（给表格的父元素加）el-table外多包裹一层div，包裹的容器设置绝对定位及宽度，继承父级宽度。el-table只能自适应变大，不能自适应变小。flex属性的容器设置相对定位。
ElementUI 表格el-table自适应高度设置
weixin_44293690的博客
05-07 1176
ElementUI 表格el-table自适应高度设置
flex布局，数据列展示，并居中，页面缩放样式错乱
qq_43393995的博客
09-19 1099
页面缩放时，样式错乱了，解决方案是我在最外层包了一层div，样式的话就是上面.body,我所理解的是，在外面用容器包裹住，那么页面进行缩放 的时候就容器大小会整体改变，但是不会影响容器里面的样式。元素居中，margin后面如果只有两个参数的话，第一个表示top和bottom，第二个表示left和right。因为0 auto，表示上下边界为0，左右则根据宽度自适应相同值（即居中）
浏览器缩小窗口 样式乱掉
qq_38407379的博客
03-19 2427
解决方法：自动变为滚动条：给div固定宽度直接用滚动条：添加样式 overflow:scroll  overflow:auto
浏览器缩放，会导致布局打乱，解决方法？/一缩小网页布局就打乱了怎么办？
热门推荐
hello world！
12-06 3万+
原因通常就是你的元素浮动了，最好设置个最小宽度min-width:具体宽度值 px;，如果你需要自适应，用media查询 有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度，而子元素用固定的px设置宽度，当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max-wid
el-table flex 缩放时会有个动画
03-14
为了使 `el-table` 在Flex布局下具有平滑的缩放动画效果，可以通过CSS过渡属性来控制尺寸变化的效果。当调整窗口大小或者内容发生改变时，应用这些样式可以让用户体验更加流畅。 对于 `el-table` 的父容器，在原有...
el-table下el-table-column有长有短，例如编码列宽度是1，相似度列的宽度就为0.5，名称列的宽度就是3，完善css样式，使el-table的父div变窄时，el-table中个元素不变形，宽度同步变化
09-13
在使用 Element UI 的 `el-table` 组件时，可以通过给 `el-table` 添加特定的 CSS 类来控制表格和其子列的响应式布局，以确保在父 `div` 宽度变化时，表格内的元素能够适应性地缩放，而不会变形。 首先，你需要为 `...
<el-table border max-height="370" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%;"> <el-table-column align="center" label="类别" prop="num" width="200"> </el-table-column> <el-table-column prop="name" align="center" label="综合成绩" width="200"> </el-table-column> <el-table-column prop="name" align="center" label="成绩档次" > </el-table-column> </el-table> width="200"宽怎么设置30%呢
03-14
嗯，用户想调整Element UI的el-table-column...- 当屏幕尺寸变化时，浏览器会自动按比例缩放 - 内容过长时建议添加 `show-overflow-tooltip` 属性启用省略号提示 - 若需要最小宽度保护，可组合使用 `min-width` CSS属性
el-table 拉伸
02-11
当 `el-table` 被放置在一个具有 `flex-grow` 属性（即 `flex: 1`）的子元素内时，可能会因为该属性的作用而导致表格不断增大。为了避免这种情况的发生，建议修改父级容器的设计模式或者直接移除可能导致此现象的...
el-table自动占满高度
最新发布
06-17
具体步骤：-布局：将el-table放置在一个具有明确高度的容器中，通常这个容器的高度由外层布局决定（比如使用flex布局撑满剩余空间）。-设置el-table的高度为100%，或者使用计算属性动态设置高度。下面是一个使用Flex...
浏览器缩放，会导致布局打乱，解决方法？/一缩小网页布局就打乱了怎么办？...
anbinmei9074的博客
06-03 2000
原因通常就是你的元素浮动了，最好设置个最小宽度min-width:具体宽度值 px;，如果你需要自适应，用media查询 有些地方不写死的话可以用min-width和max-width来限制一下。不然你父容器用百分比设置宽度，而子元素用固定的px设置宽度，当你父容器缩小到一定程度的时候肯定容不下固定宽度的子元素。如果想百分比和固定宽度混用的话最好设置一下min-width和max...
el-table自适应缩放大小
Passerby_K的博客
08-14 1704
el-table 自适应缩放大小
flex布局下el-table表格高度自适应、表格头部固定
JCAL123的博客
01-03 969
flex布局下el-table表格高度自适应、表格头部固定
解决页面缩放后，vue中e-table在谷歌浏览器中表格线不对齐问题
qq_34169240的博客
08-21 1376
vue中使用e-table时，发现会出现浏览器不兼容的问题，谷歌浏览器中表头的横竖线会有一点偏差 解决方案：在style中加 body.el-tableth.gutter{ display:table-cell!important; }
网页布局(解决浏览器缩放页面乱版问题)
m0_60633107的博客
03-01 4583
网页布局(解决浏览器缩放页面乱版问题)
浏览器缩放导致table表格错位样式问题的解决
Luckygirl_jian的博客
09-03 1562
html table表格在浏览器缩放100%时正常显示 但人们有时会缩放90或者更小，这时样式便出现了问题，错位了，该如何解决呢？
解决Flexbox布局在缩小尺寸时会丢失比例
路虽远，行则必至！
07-03 600
允许弹性项目缩小超过其内容使用min-width: 0（行方向）、min-height: 0（列方向）或overflow: hidden（其他值也有效，除了visible）。这意味着，默认情况下，允许 flex 项目缩小到任何定义的width,height或之下flex-basis。这意味着，默认情况下，弹性项目不能小于其内容的大小（无论flex-shrink或flex-basis）。flex 容器的初始设置是flex-shrink: 1.解释：需要考虑以下两个概念。
flex 伸缩布局
weixin_44684357的博客
11-18 372
Flex是Flexible Box的缩写，意为”弹性布局”，任何一个容器都可以指定为flex布局； 为什么要有弹性布局？？？ 答：在将某三个盒子排布在一行不用flex，width设置为%值，盒子之间的用margin进行间隔时缩放浏览器会出现元素溢出的情况；如果这个时候设置display：flex；无论元素怎么margin都不会溢出都在父盒子里面等比例缩放； 其中可以设置缩放的最小值 min-width，最大值max-width 其主要包含六个属性： flex-direction flex-wrap flex
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值