vxe-table solves the white screen problem during virtual scrolling

Virtual scrolling is used in the project, and the screen will go white as soon as the scrolling is fast. I spent two days reading the source code and checking the rendering elements. I found that the elements were rendered very quickly and could keep up, but the white screen still appeared. I will check later. Style, I found that as long as I remove the background color of the table, there is no problem with scrolling. This white screen is actually caused by the background color of the table. I wasted two days studying the performance issues of the source code.

#2160 pr has been merged, vue3 can update vxe-table to the latest version 4.5.7. If it is vue2, the v3 version of vxe-table has not been repaired yet, just change the style globally.

v3 version removes background color

.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 version removes background color

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

It’s no problem to directly set the background color to the table. Just
set the background color to the outermost div. This will happen. It seems that the browser rendering mechanism at this time is to render the background color first and then render the table.

Personally, I feel that the most likely reason is the drawing order.
Insert image description here

Insert image description here

Guess you like

Origin blog.csdn.net/qq_42611074/article/details/132475057