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

更新時間：2018年03月02日 14:51:47 作者：song_zhiyin

下面小編就為大家分享一篇vue element-ui table表格滾動加載方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

添加全局注冊事件，用來監(jiān)聽滾動事件

window.Vue.directive('loadmore', {
 bind(el, binding) {
 const selectWrap = el.querySelector('.el-table__body-wrapper')
 selectWrap.addEventListener('scroll', function() {
  let sign = 100
  const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
  if (scrollDistance <= sign) {
  binding.value()
  }
 })
 }
})

sign 用于標(biāo)記位置

直接讓scrollDistance === sign 并不能保證每次都會觸發(fā)，所以用區(qū)間表示。后續(xù)會處理頻繁觸發(fā)問題。

添加事件

給需要無線加載的表格添加自定義事件，v-loadmore=”loadMore”。在methods中定義觸發(fā)的事件

 loadMore () {
 if (this.loadSign) {
  this.loadSign = false
  this.page++
  if (this.page > 10) {
  return
  }
  setTimeout(() => {
  this.loadSign = true
  }, 1000)
  console.log('到底了', this.page)
 }
 }

this.loadSign 用于標(biāo)記page是否繼續(xù)遞增

以上這篇vue element-ui table表格滾動加載方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue開發(fā)實現(xiàn)滑動驗證組件
這篇文章主要為大家詳細(xì)介紹了如何利用Vue開發(fā)實現(xiàn)簡單的滑動驗證組件，并且適配移動和PC，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
2023-07-07
Nuxt的動態(tài)路由和參數(shù)校驗操作
這篇文章主要介紹了Nuxt的動態(tài)路由和參數(shù)校驗操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue項目中icon亂碼的問題及解決
這篇文章主要介紹了vue項目中icon亂碼的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-12-12
深入理解與使用keep-alive(配合router-view緩存整個路由頁面)
這篇文章主要介紹了深入理解與使用keep-alive(配合router-view緩存整個路由頁面)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
vue3?process.env.XXX環(huán)境變量不生效的解決方法
這篇文章主要給大家介紹了關(guān)于vue3?process.env.XXX環(huán)境變量不生效的解決方法,通過文中介紹的方法可以很方便的解決遇到的問題,對大家學(xué)習(xí)或者使用vue3具有一定的參考借鑒價值,需要的朋友可以參考下
2023-08-08
一次搞清Vue3中組件通訊的全部方式
毫無疑問,組件通訊是Vue中非常重要的技術(shù)之一,它的出現(xiàn)能夠使我們非常方便的在不同組件之間進(jìn)行數(shù)據(jù)的傳遞,以達(dá)到數(shù)據(jù)交互的效果,所以,學(xué)習(xí)組件通訊技術(shù)是非常有必要的,本文將一次解決Vue3中組件通訊的全部方式,總有你想要的那一種,需要的朋友可以參考下
2024-09-09
Vue2.0 實現(xiàn)歌手列表滾動及右側(cè)快速入口功能
這篇文章主要介紹了Vue2.0實現(xiàn)歌手列表滾動及右側(cè)快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08
vue 組件全局注冊和局部注冊的實現(xiàn)
下面小編就為大家分享一篇vue 組件全局注冊和局部注冊的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue?router如何實現(xiàn)tab切換
這篇文章主要介紹了vue?router如何實現(xiàn)tab切換，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04