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