背景

做管理平臺的項目,用到了element-ui，需要通過監(jiān)聽el-table滾動的位置來獲取最新的數(shù)據(jù)，那么怎么樣監(jiān)聽el-table的滾動呢？

準(zhǔn)備

我們默認(rèn)的技術(shù)棧是 vue+element-ui

template代碼：

<el-table  :data="logList"  :show-header="false"  row-class-name="table-row-class"  height="700"  ref="table"  @row-click="rowClick"> <el-table-column type="expand">  <el-table-column  label="log信息"  prop="message"> </el-table-column></el-table>

綁定監(jiān)聽事件

 mounted() {  // 獲取需要綁定的table  this.dom = this.$refs.table.bodyWrapper  this.dom.addEventListener('scroll', () => {   // 滾動距離   let scrollTop = this.dom.scrollTop   // 變量windowHeight是可視區(qū)的高度   let windowHeight = this.dom.clientHeight || this.dom.clientHeight   // 變量scrollHeight是滾動條的總高度   let scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight   if (scrollTop + windowHeight === scrollHeight) {    // 獲取到的不是全部數(shù)據(jù) 當(dāng)滾動到底部 繼續(xù)獲取新的數(shù)據(jù)    if (!this.allData) this.getMoreLog()    console.log('scrollTop', scrollTop + 'windowHeight', windowHeight + 'scrollHeight', scrollHeight)   }  }) }

獲取到新的數(shù)據(jù)后，調(diào)整滾動條的位置

 getMoreLog() {  ...  this.dom.scrollTop = this.dom.scrollTop - 100  ... }

結(jié)語

至此我們已經(jīng)完成了對table的綁定！ 希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。