監(jiān)聽element-ui table滾動事件的方法

更新時間：2019年03月26日 11:39:13 作者：znmdcoco

這篇文章主要介紹了監(jiān)聽element-ui table滾動事件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景

做管理平臺的項目,用到了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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue element-ui table表格滾動加載方法

相關(guān)文章

vue3+vite項目中顯示SVG圖片的實現(xiàn)
vite-plugin-svg-icons是一個Vite插件,其作用是將SVG圖標(biāo)文件轉(zhuǎn)換為Vue組件,本文主要介紹了vue3+vite項目中顯示SVG圖片的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下
2024-02-02
vue中子組件如何間接修改父組件傳遞過來的值問題
這篇文章主要介紹了vue中子組件如何間接修改父組件傳遞過來的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
詳解vue3+electron如何做到本地化
要在Vue?3和Electron中實現(xiàn)本地化,可以使用類似于在Vue項目中進行本地化的方式,本文為大家介紹了一種常見的做法,希望對大家有所幫助
2024-03-03
vue中的provide/inject的學(xué)習(xí)使用
本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
Vue Element-UI中el-table實現(xiàn)單選的示例代碼
在element-ui中是為我們準(zhǔn)備好了可直接使用的單選與多選屬性的,本文主要介紹了Vue Element-UI中el-table實現(xiàn)單選的示例代碼,具有一定的參考價值,感興趣的可以了解一下
2023-12-12
詳解Vue 方法與事件處理器
本篇文章主要介紹了詳解Vue 方法與事件處理器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vue使用canvas實現(xiàn)移動端手寫簽名
這篇文章主要為大家詳細介紹了基于vue使用canvas實現(xiàn)移動端手寫簽名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
vue 項目@change多個參數(shù)傳值多個事件的操作
這篇文章主要介紹了vue 項目@change多個參數(shù)傳值多個事件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2021-01-01
Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)，對vue感興趣的同學(xué)，可以參考下
2021-04-04
vue中v-model和.sync修飾符的區(qū)別
在平時開發(fā)是經(jīng)常用到一些父子組件通信,經(jīng)常用到props、vuex等等,下面這篇文章主要給大家介紹了關(guān)于vue中v-model和.sync修飾符區(qū)別的相關(guān)資料,需要的朋友可以參考下
2022-06-06