Methods to listen for element-ui table scrolling events

background

When doing a management platform project, element-ui is used, and the latest data needs to be obtained by listening to the scrolling position of the el-table. So how to listen to the scrolling of the el-table?

Prepare

Our default technology stack is vue+element-ui

template code:

&lt;el-table 
 :data="logList" 
 :show-header="false" 
 row-class-name="table-row-class" 
 height="700" 
 ref="table" 
 @row-click="rowClick"&gt;
 &lt;el-table-column type="expand"&gt;
  &lt;el-table-column
  label="log information"
  prop="message"&gt;
 &lt;/el-table-column&gt;
&lt;/el-table&gt;

Binding listening events

 mounted() {
  // Get the table that needs to be bound   = this.$
  ('scroll', () =&gt; {
   // Rolling distance   let scrollTop = 
   // The variable windowHeight is the height of the viewing area   let windowHeight =  || 
   // The variable scrollHeight is the total height of the scrollbar   let scrollHeight =  || 
   if (scrollTop + windowHeight === scrollHeight) {
    // What you get is not all the data When scrolling to the bottom, continue to get new data    if (!) ()
    ('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)
   }
  })
 }

After obtaining new data, adjust the position of the scroll bar

 getMoreLog() {
  ...
   =  - 100
  ...
 }

Conclusion

So far we have completed binding to the table! I hope it will be helpful to everyone's learning and I hope everyone will support me more.