element-ui가 테이블 스크롤 효과를 작동하는 방법

이번에는 element-ui가 테이블 스크롤 효과를 어떻게 작동하는지 보여드리겠습니다. Element-ui가 테이블 스크롤을 작동할 때 주의사항은 무엇인가요?

스크롤 이벤트를 수신하기 위한 전역 등록 event 추가

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

표시는 위치를 표시하는 데 사용됩니다.

직접 scrollDistance === 표시를 허용한다고 해서 매번 트리거된다는 보장은 없으므로 표시됩니다. 간격으로. 빈번한 트리거 문제는 나중에 다루겠습니다.

이벤트 추가

무선으로 로드해야 하는 forms에 사용자 정의 이벤트를 추가합니다(v-loadmore="loadMore"). 메소드에서 트리거된 이벤트를 정의하세요

 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은 페이지가 계속 증가하는지 여부를 표시하는 데 사용됩니다

이 기사의 사례를 읽은 후 메소드를 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주목하세요. PHP 중국어 웹사이트의 기사!

추천 도서:

Vue에서 Compass 사용하기

UEditor 리치 텍스트 편집기 통합 방법

위 내용은 element-ui가 테이블 스크롤 효과를 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!