Ant Design Vue中tabs标签页切换导致页面变宽的问题
问题
在使用Ant Design Vue进行开发的时候，使用了tabs标签页，在页里面套用了表格，但是在页面切换后，会发现页面的width会变大差不多2倍，这样会导致页面一些结构的样式发生变化。
解决
在查阅一些资料之后，看到有人说可能是Ant Design在进行table封装时使用了自适应的问题，解决方法就是在外层盒子加上绝对定位。
于是，我在外层盒子添加绝对定位:position:absolute;，然后给页面宽为100%:width:100%，很欣喜的发现这个问题解决了，切换tabs之后页面再也不会变宽了。
但是在欣喜还没有结束之前，就发现了一个新的问题，我的页面高度发生了变化，导致滚动条无法下滑，页面中的table无法完全显示。这又是为什么呢？
因为我们设置了绝对定位，导致这一个模块脱离了文档流，整个页面的高度也发生了变化，于是我的页面中只显示了半个表格，而且滚动条无法下拉。
优化
绝对定位脱离文档流之后，我还百度了一些方法来解决这个问题，发现好像都不太行，一筹莫展…我承认当时脑子短路了。（因为是周五下班后）。后来不知道几十分钟后脑子才突然出现一句pink老师的咒语"子绝父相"。
于是我又给他的父元素添加了相对定位:position:relative来解决这个问题。本来是抱着试一试的心态，结果真的解决了。
绝对定位之后，元素脱离文档流，不占位置，下面的内容会上来，在整个表格不占位置之后，我的页面就变得很小了，所以上下的滚动条无法使用。但是在父元素添加相对定位之后，虽然绝对定位的元素脱离了文档流，但是它外层的父元素还占用着文档流的地方，因此页面可以正常的滑动。
Ant Design Vue中tabs标签页切换导致页面变宽的问题相关推荐
- php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
- ant design vue pro 支持多页签模式 页签可以缓存
ant design vue pro 支持多页签模式 页签可以缓存 代码贴在最后 启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
- 解决ant design vue中的modal弹框样式修改无效问题 修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的 原因在于弹框modal被挂载在最大的元素div外面了 所以需要将挂载在某个html元素上 在modal外 ...
- ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式 问题 历程 UploadList 组件源码 h() 方法 实现 注 问题 技术:vue.ant design vue 在开发项 ...
- vue 循环tabs 标签页 组件_vue学习笔记--v-for循环标签页label并实现根据不同label表格切换...
目标:用标签页组件实现点击不同标签显示表格内容,标签页内lab le 和表格数据都是循环得到的. 效果如图: 2.png 首先 实现pane 循环出header. v-model="tabK ...
- Ant design vue pro 添加多页签
1.修改模板 /src/layouts/BasicLayout.vue 添加如下代码 第一处: <!-- layout content --><a-layout-content :s ...
- vue 循环tabs 标签页 组件_Vue render函数实战--实现tabs选项卡组件
用过Element ui库的童鞋肯定知道组件,简单.好用.可以自定义标签页,不知道广大童鞋们在刚开始使用组件的时候有没有想过它是如何实现的?我咋刚开始使用组件的时候就有去想过,也想去实现一个超级简单的 ...
- EasyUI中Tabs标签页的简单使用
场景 效果 属性 tabs none 返回全部的标签页面板(tab panel). resize none 调整标签页(tabs)容器的尺寸并做布局. add options 添加一个新的标签页面板( ...
- Ant design vue中实现动态更换主题色
一.创建vue项目 可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口 输入文件名 ,文件名最好是英文 然后进行配置功能, 根据需求选择配置功能 这里最好选择2.0版本, 可以 ...
最新文章
- 升级将至，BCH各开发组已推出兼容新版本
- python怎么读取列表-Python如何获取列表(List)的中位数
- Android Fragment中ListView的OnItemClickListener无效
- Axis --SOAP引擎
- ArcEngine对Blob字段赋值的方法
- android缓存之Lrucache 和LinkedHashMap
- mysql xtrabackup备份工具使用
- 【Android学习】三种布局include /、merge /、ViewStub /
- Ubuntu16.04编译Android6.0/cm13.0教程及相关错误解决办法
- Python语言的技术领域
- 添加proc文件，控制sctp的debug输出
- 读取微信聊天记录并制作词云图
- 高端存储十面埋伏 华为全闪存系列亮剑出击
- 这是最坏的时代，也是最好的时代
- Openssl漏洞修复
- php im即时消息,im即时通讯php
- 急！灾区的食物依然短缺！（找不到原题出处只能这样了.....）
- 一名3年工作经验的程序员应该具备的技能 ！
- 求字符串中回文子串的个数（回文树详解）
- Windows10系统激活技巧