vue elementUI table form data rolling lazily

We are experiencing a performance problem in the project

vue + elementUI table table shows the data, the time when a lot of data, not a show finish, while a request for data is too big, will increase the page rendering time, affecting the experience,
this time often have two ways to deal with,

1, tab, as follows

2, if I do not want to page, and want to show it all the data on one page? In fact, this time can be lazy loaded data

The following table shows a start row of data is only 31

When the scroll bar is pulled low, it will then load the data 31, if the rest of the data is less than 31, then the rest of the load

According to project requirements, which requires a can see all the data, so I chose the second way in

So the second way to how to achieve it?

Understand how it works before you need to distinguish three attributes:
scrollHeight: refers to the total height of the element that contains the contents of the scroll bar. Read-only attribute. Without px units. Is the next figure, height 54 data, but because of the scroll bar, so the screen can not see such a high
scrollTop: when the element scroll bar, scroll down, scroll up the contents of the distance. Read and write. Without px units. If the element does not scroll bar scrollTop is 0, the value can only be positive. The red is the height of the lower frame
clientHeight: the size of the client area of the element, the element refers to the size of the space occupied by the content of their borders, in fact, the size of the visible area. It is the height of the red arrows in the figure below

How to determine that rolled scroll bar at the bottom of it?

scrollHeight-scrollTop-clientHeight = 0, this is when you can roll the scroll bar at the bottom of the time.

The first time the requested data, first set a variable to record the number of requests (in fact, is to do background processing paging)

the this .currentPage =. 1 , 
$ the this = the this ;
 the this . axios.fun $ () the then (RES =>. { 
     $ the this .totalPage = res.totalPage; // here need to know the total number of pages 
     
     $ the this .tableData = RES. data; // table data 
})

Scroll event listener table dom object

DOM = the let document.querySelector (targetDom); 
    dom.addEventListener ( "Scroll", function () { 
        const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
         IF (scrollDistance <= 0) { // is equal to 0 proof already in the end, may request interface 
            IF ($ the this .currentPage <$ the this .totalPage) { // the current page number smaller than the total number of sheets requested 
                $ the this .currentPage ++; // current page number incremented 
                
                // request code interface 
                $ the this . $ axios.fun (). the then (RES => { 
                
                    $ the this= $ .tableData the this .tableData.concat (res.data) // request data back and combined with the currently displayed 
                }) 
                
            } 
        } 
    })

Well, lazy loading data table drop-down scrolling is achieved, the desire to help students in need.

Bowen quotation link: https://segmentfault.com/a/1190000018756141?utm_source=tag-newest

vue elementUI table form data rolling lazily

Guess you like