vue의 element-ui가 테이블에서 롤링 로딩 방법을 구현하는 방법에 대해

이제 참고할만한 가치가 있는 vue element-ui 테이블 스크롤 로딩 방법을 공유해 드리고 모든 분들께 도움이 되었으면 좋겠습니다.

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

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()
  }
 })
 }
})

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

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

이벤트 추가

무선으로 로드해야 하는 테이블에 사용자 정의 이벤트를 추가합니다(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은 페이지가 계속 증가하는지 여부를 표시하는 데 사용됩니다

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 글:

Vue.js를 통해 선택 드롭다운 목록을 구현하는 방법, 구체적인 작업은 다음과 같습니다.

iview에서 선택 드롭다운 상자 옵션이 잘못 배치되는 문제를 해결하는 방법, 구체적인 연산은 다음과 같습니다

vue 변경 해결 방법 속성을 계산한 후 선택 값이 변경되지 않는 문제, 구체적인 연산은 다음과 같습니다

위 내용은 vue의 element-ui가 테이블에서 롤링 로딩 방법을 구현하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!