溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-09-25 03:39:21 來(lái)源：腳本之家 閱讀：634 作者：song_zhiyin 欄目：web開發(fā)

添加全局注冊(cè)事件，用來(lái)監(jiān)聽滾動(dòng)事件

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 并不能保證每次都會(huì)觸發(fā)，所以用區(qū)間表示。后續(xù)會(huì)處理頻繁觸發(fā)問題。

添加事件

給需要無(wú)線加載的表格添加自定義事件，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表格滾動(dòng)加載方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手