Ant Design Vue中tabs标签页切换导致页面变宽的问题

问题

在使用Ant Design Vue进行开发的时候,使用了tabs标签页,在页里面套用了表格,但是在页面切换后,会发现页面的width会变大差不多2倍,这样会导致页面一些结构的样式发生变化。

解决

在查阅一些资料之后,看到有人说可能是Ant Design在进行table封装时使用了自适应的问题,解决方法就是在外层盒子加上绝对定位。
于是,我在外层盒子添加绝对定位:position:absolute;,然后给页面宽为100%:width:100%,很欣喜的发现这个问题解决了,切换tabs之后页面再也不会变宽了。
但是在欣喜还没有结束之前,就发现了一个新的问题,我的页面高度发生了变化,导致滚动条无法下滑,页面中的table无法完全显示。这又是为什么呢?
因为我们设置了绝对定位,导致这一个模块脱离了文档流,整个页面的高度也发生了变化,于是我的页面中只显示了半个表格,而且滚动条无法下拉。

优化

绝对定位脱离文档流之后,我还百度了一些方法来解决这个问题,发现好像都不太行,一筹莫展…我承认当时脑子短路了。(因为是周五下班后)。后来不知道几十分钟后脑子才突然出现一句pink老师的咒语"子绝父相"。
于是我又给他的父元素添加了相对定位:position:relative来解决这个问题。本来是抱着试一试的心态,结果真的解决了。
绝对定位之后,元素脱离文档流,不占位置,下面的内容会上来,在整个表格不占位置之后,我的页面就变得很小了,所以上下的滚动条无法使用。但是在父元素添加相对定位之后,虽然绝对定位的元素脱离了文档流,但是它外层的父元素还占用着文档流的地方,因此页面可以正常的滑动。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值