element-ui中table组件行错位问题_elementui表格滚动发生错位

一、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);
  },