首页 程序开发element-ui el-table 表格疯狂抖动跳动不停

element-ui el-table 表格疯狂抖动跳动不停

发布于: 2019-07-11 09:12:53
字数: 907
评论: 2
阅读: 14162

element-ui el-table 表格疯狂抖动跳动不停, 这究竟是道德的沦丧还是人性的毁灭.~~

bug效果

问题的大致效果如下图:

element-ui el-table 表格疯狂抖动跳动不停

查找原因

通过审查元素可以看到el-table__body 的 width 不停被设置导致表格抖动,从官方github的issue里找到了大致的原因是:

  • 当未设定列表宽时,element有做自动检测适应。这造成了一种情况,即上下滚动条的出现时,触发宽度,使得上下滚动条消失,再次触发宽度变换,然后如此循环。
  • flexbox 子元素设置了 overflow: auto 导致的浏览器 bug

解决办法

  1. 检查布局中的:overflow: auto, 避免flexbox 子元素设置这个属性.
  2. 临时解决:既然问题是.el-table__body宽度不停被设置导致的抖动,那么我们可以给.el-table__body添加 width: 100%!important; 属性,强制宽度为100%,这样表格就不会抖动了。目前没有发现别的bug,而且设置上这个宽度之后,.el-table__bodywidth属性也不改变了。

参考资料


扫描二维码,在手机上阅读
评论列表:
SukiYu
2020-04-10 00:53
这个我试过,但还是解决不了,但我设置了.el-table__body的min-height后,就解决了,可能这里要结合不同情况来考虑,或者两个属性都设置上比较保险。
还有一个比较老套的解决方法,就是给el-table-column加上min-width或width,防止过长的标题出现换行
jaeheng
2020-04-10 08:30
@SukiYu:供参考