1. Problem
When the el-table in elementUI slides left and right, the header of the table will be delayed relative to the content of the table, as shown in the figure below. For details, you can check it on the official website of elementUI.
2. Why is there such a problem?
Because the implementation of el-table is implemented with two tables, the table header is a table, and the content is a table. In the el-table source code, the method of letting table1 slide with table2 is: add a monitoring event to table2, once table2 slides , recalculate the position of table1.
3. Solve
In fact, this problem has been fixed in elementUI 2.15.9 version. , let's take a look at the source code of el-table in github and see how to solve it. Address: Release v2.15.9 ElemeFE/element (github.com)
source code:
Line 415, the original code for performance optimization, write a throttle function here.
Lines 446 and 453, in version 2.15.9, the event function bound to the header and the event function unbound are replaced by an onScroll function written by myself.
Line 436, the onScroll function, first judges whether the browser supports requestAnimationFrame (the api supported by this browser has greatly improved the throttling performance compared to the throttling performance written by myself), if this API does not support it, the original handwritten throttling function is still used; if If it is supported, use this API and pass the original throttling function as a parameter.
Line 432, changed the previous throttling function, changed the time from 20ms to 16ms, because the refresh rate of general computer monitors is 60HZ, that is, the browser needs to redraw 60 times per second, divide 1 second by 60 , which is 1000ms/60, which is approximately equal to 16.6666667, so the most suitable redrawing interval is 16ms or 17ms. This time can achieve the smoothest animation transition effect. If it is lower than this value, the user will not perceive it, and it will cause It is a waste of performance, so 16ms is the most suitable.
So in summary, the new version of elementUI solves this problem:
1. Replace the throttling function with the requestAnimationFrame function.
2. Changed the handwriting throttling event from 20ms to 16ms which is most suitable for browsers.
(ps: However, the official website of element UI is still version 2.15.7, but it has been updated to version 2.15.9 on github)