vue+elementui 实现table懒加载

• 实现原理: 判断表格滚动条是否滚动到底部
  scrollHeight: 元素的高度即表格内容的高度
  scrollTop: 元素滚动出去的高度
  clientHeight: 元素可视区域的高度
  当scrollTop + clientHeight = scrollHeight 时,滚动条滚动到底部

自定义指令 ----- 可以写在main.js中,或者单独写js文件再使用Vue.use('文件名')注册
Vue.directive('loadmore', {
    bind(el, binding) {
        let loadmore = binding.value.loadmore, // 列表请求接口
            callback = binding.value.callback, // 处理响应数据
            selectWarp = el.querySelector('.el-table__body-wrapper')
          // 监听滚动事件  
         selectWarp.addEventListener('scroll', function() {
             let sign = 0
             const scrollDistance = this.scrollHeight - this.scrollTop - this.cilentHeight
             if(scrollDistance <= sign) {
                 // 滚动条到底部
                 loadmore(callback) // 请求接口并传入回调函数
             }
         })   
            
    }
})

list.vue — 需要表格懒加载的页

<template>
    <div>
        <!-- 回调函数名称必须为callback,使用别的方法名,需要像如下格式书写 -->
        <el-table max-height="550" :data="dataList" v-loadmore="{loadmore,calllback: viewData}">
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            dataList: [],
            isLastPage: false,
            page: 1,
            limit: 10
        },
        menthods: {
            loadmore(callback) {
                if(this.isLastPage) return
                if(this.page == 1) this.page++
                this.axios({
                    method: 'get',
                    url: 'xxxxxxxxxx',
                    params: {
                        page: this.page,
                        limit: this.limit
                    }
                }).thne(res => {
                    if(res.success) {
                        if(res.result.list.length > 0) {
                            if(this.page < res.result.pages) this.page++
                            else this.isLastPage = true
                            res.result.list.forEach(item => {
                                this.dataList push({...item})
                            })
                        } else this.isLastPage = true
                        callback && callback(this.dataList)
                    } else this.$message.error(res.result.message)
                })
            }
        }
    }
</script>