快捷導(dǎo)航

監(jiān)聽(tīng)element-ui table滾動(dòng)事件的方法

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

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

背景

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

準(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)聽(tīng)事件

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

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

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

結(jié)語(yǔ)

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

您可能感興趣的文章:

vue element-ui table表格滾動(dòng)加載方法

相關(guān)文章

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