vxe-table解决虚拟滚动时的白屏问题

项目中使用虚拟滚动,滚动一快就会白屏,花了两天时间看了源码,检查渲染元素,发现元素渲染的是很快的,跟得上的,但是还是会出现白屏,后面检查样式,发现只要把表格背景色去掉,滚动一点问题都没有,这个白屏居然是表格的背景色导致的

更新版本即可解决

#2160 pr已合并,vue3更新vxe-table到v4最新版即可 npm i -s vxe-table@latest,vue2更新vxe-table到v3版本最新版即可 npm i -s vxe-table@legacy

v3版本去掉背景色(不推荐,这里仅为举例)

.vxe-table--main-wrapper .vxe-table--render-default .vxe-table--body-wrapper,
.vxe-table--main-wrapper .vxe-table--render-default .vxe-table--footer-wrapper {
  background-color: transparent !important;
}

v4版本去掉背景色(不推荐,这里仅为举例)

.vxe-table--render-default .vxe-table--body-wrapper {
    background-color: transparent !important;
}

(推荐解决方案)把.vxe-table--body-wrapperbackground属性设置成none,即可覆盖background-color,需要背景色的话改成给子元素的table设置background-color

给官方提的pr就是这一方案

直接给table设置背景色不会出现白屏,只有给最外层这个div设置背景色,会出现这样情况,感觉这时的浏览器渲染机制是,先渲染背景色,再渲染表格

个人感觉最有可能是绘制顺序的原因
在这里插入图片描述

在这里插入图片描述

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 13
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值