[JavaScript知识库]vue+elementUI实现表格滚动加载

简单粗暴，直接上代码

• el-table-loadmore/index.js文件

const vueClearIndex = {}
/*
* element 表格实现滚动加载
*/
vueClearIndex.install = Vue => {
  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()
        }
      })
    }
  })
}

export default vueClearIndex

• main.js注册

import loadmore from '@/directive/el-table-loadmore' // 表格滚动加载
loadmore.install(Vue)

• 组件中使用 v-loadmore

 <el-table ref="multipleTable" :data="detailList" style="width: 100%;" :max-height="maxHeight"   v-loadmore="loadMore">
 ...
 </el-table>

• loadMore方法

    loadMore() {
      if (this.searchData.currentPage < this.pages) {//当前页数小于总页数就请求 
        this.searchData.currentPage++;//当前页数自增
        this.getData()
      }
    },

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖