项目中使用虚拟滚动,滚动一快就会白屏,花了两天时间看了源码,检查渲染元素,发现元素渲染的是很快的,跟得上的,但是还是会出现白屏,后面检查样式,发现只要把表格背景色去掉,滚动一点问题都没有,这个白屏居然是表格的背景色导致的
更新版本即可解决
#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-wrapper
的background
属性设置成none
,即可覆盖background-color
,需要背景色的话改成给子元素的table
设置background-color
给官方提的pr就是这一方案
直接给table设置背景色不会出现白屏,只有给最外层这个div设置背景色,会出现这样情况,感觉这时的浏览器渲染机制是,先渲染背景色,再渲染表格
个人感觉最有可能是绘制顺序的原因