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

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

jaeheng 2019-7-11 0 450

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属性也不改变了。

参考资料

作者: jaeheng 本文发布于2019-7-11 09:12:53
jaeheng

前端工程师,emlog模版beginning开发者

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。

发表评论