eltable滚动文字抖动

Posted 2023-04-17

参考技术A eltable滚动文字抖动原因：审查元素el-table__head，el-table__body的width不停被设置导致表格抖动，当未设定列表宽时，element有做自动检测适应。这造成了一种情况，即上下滚动条的出现时，触发宽度，使得上下滚动条消失、再次触发宽度变换，然后如此循环和页面出现重绘、v-for的key属性渲染不对。解决：
1、表格数据的v-for中的key使用随机数：key=“Math.random()。
2、检查布局中的：overflow：auto，避免flexbox子元素设置这个属性，给el-table__head，.el-table__body添加width：99.9%。important。属性，强制宽度、设置elementui表格的容器的高度=table容器高度/行数。
3、如果切换表格的数据时表格是向下而上的抖动，可以使用element表格中的dolayout函数解决：对Table进行重新布局，当Table或其祖先元素由隐藏切换为显示时，需要调用此方法。

解决滚动条加载出现的页面抖动

1、页面抖动

原因：一个网站通常存在着多个页面，浏览器默认提供的overflow:auto;根据内容进行判断是否需要滚动条，
这造成每个页面是否有右侧的滚动条是不一致的，这会导致有滚动条的页面跳转到没有滚动条的页面会发生页面抖动

2、解决方法一：用overflow-y:scorll显性的设置右边提供滚动机制

实现css代码：html {overflow-y: scroll;overflow-x: hidden;}；
缺点：不论屏幕是否需要滚动条，滚动条都会显示；

3、解决方法二：滚动条宽度：calc(100vw - 100%)

100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
calc()为计算方法
解决抖动可以根据是否有有滚动条进行不同的左右宽度计算：style="width: 100vw;overflow: hidden;padding-left: calc(100vw - 100%);"