Home > Web Front-end > JS Tutorial > How to scroll the table table in element-ui

How to scroll the table table in element-ui

php中世界最好的语言
Release: 2018-04-12 13:57:30
Original
3621 people have browsed it

This time I will show you how to scroll the tabletable in element-ui, and what are the notes for rolling the table table in element-ui, The following is a practical case, let’s take a look.

Add global registrationEvent, used to monitor scrolling events

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()
  }
 })
 }
})
Copy after login

sign is used to mark the location

Directly letting scrollDistance === sign does not guarantee that it will be triggered every time, so it is represented by an interval. The issue of frequent triggering will be dealt with later.

Add event

Add custom events to tables that need to be loaded wirelessly, v-loadmore="loadMore". Define triggered events in methods

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

this.loadSign is used to mark whether the page will continue to increase

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

AjaxUpLoad.js for file upload

How to use Vue’s carousel component

The above is the detailed content of How to scroll the table table in element-ui. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template