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

在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就会出问题 真的很神奇)

在使用 Element UI 的 `el-table` 组件时,可以通过给 `el-table` 添加特定的 CSS 类来控制表格和其子列的响应式布局,以确保在父 `div` 宽度变化时,表格内的元素能够适应性地缩放,而不变形。 首先,你需要为 `el-table` 添加一个自定义的类名,比如 `responsive-table`,然后使用媒体查询(Media Queries)来定义不同屏幕宽度下的样式变化。 以下是一个简单的 CSS 示例,它展示了如何根据父 `div` 的宽度变化调整表格的列宽: ```css .responsive-table { width: 100%; /* 初始占满整个父容器宽度 */ } .responsive-table .el-table__body-wrapper { overflow: auto; /* 当内容超出时显示滚动条 */ } .responsive-table .el-table__body, .responsive-table .el-table__footer-wrapper { min-width: 600px; /* 设置最小宽度,防止内容过度缩放 */ } @media (max-width: 768px) { /* 对于宽度小于768px的屏幕,调整列宽 */ .responsive-table .el-table__column { flex: auto; /* flex属性使得列宽根据内容自动调整 */ } } @media (max-width: 480px) { /* 对于宽度小于480px的屏幕,进一步调整列宽 */ .responsive-table .el-table__column { flex: none; /* 禁用flex布局,使得列宽严格按照定义的比例缩放 */ width: calc(100% * column-definition); /* 使用百分比宽度或计算宽度来保持列宽比例 */ } } ``` 在这个例子中,`.responsive-table` 类被添加到 `el-table` 上,通过媒体查询在不同宽度下设置了不同的 `el-table__column` 样式规则。具体的比例值需要根据实际的列宽定义来计算。在实际应用中,你可能需要根据 `el-table-column` 的 `width` 属性定义来动态计算每个列的 `flex` 值或 `width` 值。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值