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

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

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

背景

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

準備

我們默認的技術(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ù) 當滾動到底部 繼續(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的綁定！希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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

Vue-cli assets SubDirectory及PublicPath區(qū)別詳解
這篇文章主要介紹了Vue-cli assets SubDirectory及PublicPath區(qū)別詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-08-08
vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
解決Vue3報錯:Property?“xxx“?was?accessed?during?render?but
這篇文章主要給大家介紹了關于解決Vue3報錯:Property?“xxx“?was?accessed?during?render?but?is?not?defined?on?instance.的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
2023-01-01
詳解Vue數(shù)據(jù)驅(qū)動原理
這篇文章主要介紹了詳解Vue數(shù)據(jù)驅(qū)動原理的相關資料，幫助大家更好的理解和學習vue框架的相關知識，感興趣的朋友可以了解下
2020-11-11
Vue按鈕權(quán)限的實現(xiàn)示例
在編寫Vue代碼的時候,經(jīng)常會碰到各種權(quán)限問題,本文主要介紹了Vue按鈕權(quán)限的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下
2024-08-08
vue-cli腳手架-bulid下的配置文件
這篇文章主要介紹了vue-cli腳手架-bulid下的配置文件,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
element el-tooltip動態(tài)顯示隱藏(有省略號顯示,沒有省略號不顯示)
本文主要介紹了element el-tooltip動態(tài)顯示隱藏,主要實現(xiàn)有省略號顯示,沒有省略號不顯示,具有一定的參考價值,感興趣的可以了解一下
2023-09-09
vue中緩存組件keep alive的介紹及使用方法
這篇文章主要介紹了vue緩存組件keepalive的相關資料,keep-alive組件是使用 include exclude這兩個屬性傳入組件名稱來確認哪些可以被緩存的，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2022-08-08
Vue2 添加數(shù)據(jù)可視化支持的方法步驟
這篇文章主要介紹了Vue2 添加數(shù)據(jù)可視化支持的方法步驟,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
vue實現(xiàn)的仿淘寶購物車功能詳解
這篇文章主要介紹了vue實現(xiàn)的仿淘寶購物車功能,結(jié)合完整實例形式較為詳細的分析了vue.js仿淘寶購物車功能的具體樣式、功能相關實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下
2019-01-01