vue2 el-table抖动问题解决方案

1、通过v-show切换展示el-table出现抖动问题

解决方法:
在el-table由隐藏到显示的dom更新后立刻对el-table进行重新布局(也就是调用el-table的doLayout方法),例如在nextTick或update生命周期中调用doLayout:

beforeUpdate() {
  this.$nextTick(() => {
    this.$refs.xxx.doLayout()
  })
}
//或者使用下面的更新
update() {  
  this.$refs.xxx.doLayout()
}

2、用 v-if 控制增减 table 的列出现抖动问题

因为有时会出现渲染不对问题,可以通过给这些列绑定key以正确渲染,例如 :key="1"。踩的坑是写成 :key="Math.random()",导致出现table抖动问题......

 
        
        

3、设置了overflow:auto,el-table自动检测适应出现抖动

这造成了一种情况,即上下滚动条的出现时,触发宽度,使得上下滚动条消失,再次触发宽度变换,然后如此循环。flexbox 子元素设置了 overflow: auto 导致的浏览器 bug。
解决办法:

  • 检查布局中的:overflow: auto, 避免flexbox 子元素设置这个属性.
    给.el-table__body添加 width: 100%!important; 属性,强制宽度,增加如下样式:
::v-deep .el-table__body{
    width: 100% !important;
 }
  • 在el-table中增加overflow属性,代码如下:

        
        

出现抖动的原因很多,但无外乎渲染以及宽度计算的问题,希望大家都能准确找到原因并成功解决它~~

你可能感兴趣的:(vue2 el-table抖动问题解决方案)