Vue + element UI: Vue user-defined instruction monitors the scrolling event of El table to scroll the scroll bar to the bottom and load new data

1. First, in the vue In the project main.js Add a monitor el-table Custom instructions for scroll bar Events , For global use .

//  Prepare a scroll load instruction 
Vue.directive('loadmore', {
    bind(el, binding) {
      const selectWrap = el.querySelector('.el-table__body-wrapper')
      selectWrap.addEventListener('scroll', function() {
        let sign = 0
        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
        if (scrollDistance <= sign) {
          binding.value()
        }
      })
    }
  })
//  stay main.js The file clock prepares a scroll load instruction 
Vue.directive('loadmore', {
    bind(el, binding) {
      const selectWrap = el.querySelector('.el-table__body-wrapper')
      selectWrap.addEventListener('scroll', function() {
        let sign = 0
        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
        if (scrollDistance <= sign) {
          binding.value()
        }
      })
    }
  })

2. stay el-table The label is added with a scrolling instruction defined in the global ,v-loadmore=“ Custom name ”

//  Prepare a scroll load instruction 
   <!--  Picture list  -->
          <el-table
           ref="tableData"
            v-loadmore="loadMore"
            v-loading="loading"
            :data="tableData"
            border
            stripe
          >...</el-table>
//v-loadmore For custom instructions 
  <!--  Picture list  -->
         <el-table
          ref="tableData"
           v-loadmore="loadMore"
           v-loading="loading"
           :data="tableData"
           border
           stripe
         >...</el-table>

3. In use of el-table In the page of methods Method using the function name corresponding to the custom instruction .

//  Table scroll loading event 
    loadMore() {
         console.log(' Trigger rolling load event ')
    }
//  Table scroll loading event 
    loadMore() {
     console.log(' Trigger rolling load event ')
    }