在使用Vue-antd框架时遇到一个bug，即在Tabs组件内嵌套Table会导致页面宽度增加并出现横向滚动条。尝试调整最外层盒子的100%布局未果。最终通过在Tabs外层盒子添加`position:absolute`样式成功修复此问题，推测可能与框架底层的自适应方法有关。这是一个处理宽度自动变大问题的有效解决方案，前提需确保父级宽度为100%。
使用vue-antd框架，在使用其中的tabs里面套table表格时。会出现一个神奇的bug， 切换tabs时，页面的宽度会增加，出现横向滚动的问题。
由于是一个二次的开发，我一开始是以为布局中的最外层的盒子没有设置100%布局。于是就设置了一下百分百，但是还是没有解决。这就很哇塞了，困扰了我大概一个多星期。
后来，在一个偶然的时间，我在页面上调试时，在tabs是外层盒子上，加上了一个绝对定位
即position:absolute,就是这一行样式，完美的解决了。随便在切换，怎么也不会出现横向滚动了。
后来隐隐约约发现，可能是框架底层，封装table的问题,使用了一个自适应的方法。导致出现的问题。
总结，在碰到这种宽度自动变大的问题，可以在外层套一个盒子，用定位来解决问题。这个是目前来说，比较好的一个方法。当然这个前提是要设置父级的宽度为100%。
欢迎大家点击评论和交流！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
