javascript 图书推荐 emlog模版 mongo python 创业 测试 mongodb 可视化 同步 备份 导航模版 开源 数学 数据安全 数据库 日志 服务器 概率 测试速度
首页 编程开发

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

戴墨镜的刘备 戴墨镜的刘备
分类：编程开发
字数: (907)
阅读: (16411)
摘要：element-ui el-table 表格疯狂抖动跳动不停， 这究竟是道德的沦丧还是人性的毁灭.~~

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

参考资料

转载请注明出处: 皮哈皮阿

本文的链接地址: https://blog.phpat.com/web/490.html

本文最后发布于2019年07月11日09:12，已经过了2092天没有更新，若内容或图片失效，请留言反馈

扫描二维码，在手机上阅读
()
emlog用户过多导致发布文章太慢的解决办法 windows 10重新安装微软原版操作系统
您可能对以下文章感兴趣
评论列表：
评论本文(2)
SukiYu
回复
这个我试过，但还是解决不了，但我设置了.el-table__body的min-height后，就解决了，可能这里要结合不同情况来考虑，或者两个属性都设置上比较保险。
还有一个比较老套的解决方法，就是给el-table-column加上min-width或width，防止过长的标题出现换行

4 年前

jaeheng
回复
@SukiYu：供参考

4 年前

冀ICP备2023024430号-1 京公网安备11011402053654

sitemap