一、element-ui节流引起的
出现场景:在table内容上下滚动过程中出现错位,但是滚动停止错位消失
解决办法:升级element-ui版本到2.15.9及以上
二、页面缓存引起的
出现场景:使用keep-alive对页面进行缓存,进入页面打开控制台,切换页面后重新进入,行错位
解决办法:页面激活时,重新渲染table
// 组件被激活时,重新渲染
activated(){
this.$nextTick(() => {
this.$refs && this.$refs.Table && this.$refs.Table.doLayout()
})
}
doLayout — 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法(element-ui自带的方法)
三、窗口变化引起的
出现场景:窗口放大缩小,行错位
解决方法:
监听窗口变化,对table进行重新布局
mounted () {
let fun=()=>{
this.doLayout();
if(!this.$refs || !this.$refs.Table){
window.removeEventListener('resize',fun,true);
}
};
window.addEventListener('resize',fun);
},