current position:Home>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

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

2022-04-29 14:35:41BUG_ Jia

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

copyright notice
author[BUG_ Jia],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291256474145.html

Random recommended