VUE element-ui表格 实现滚动到底部加载更多数据

原文链接：https://blog.51cto.com/u_15301254/4842790

vue：

 <el-table
                        height="600"
                        :data="visibleData"
                        style="width: 100%"
                        v-load-more.expand="{func: loadmore, target: '.el-table__body-wrapper', delay: 300}"
                        :load-more-disabled="disabledLoad">
                    <el-table-column
                            prop="id"
                            label="ID">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="日期">
                    </el-table-column>
                    <!-- 底部文案 -->
                    <div v-if="visibleData.length>=15" slot="append" style="margin-top:10px; margin-bottom:10px; text-align:center; font-size:15px ">{{content}}</div>
                </el-table>

js，放在<script>下面

<script type="text/javascript">
  const debounce = function (func, delay) {
        let timer = null
        return function () {
            if (timer) clearTimeout(timer)
            timer = null
            let self = this
            let args = arguments
            timer = setTimeout(() => {
                func.apply(self, args)
            }, delay)
        }
    }

vue

   data() {
                return {
                    visibleCount: 30,
                    content: '滚动到底部加载更多',
                    pageIndex: 1,
                    pageSize: 10,
                    tableData:[],
                    query: {
                        info: '',
                    },
                }
            },
            created(){
                let count = 20
                while(count >= 0) {
                    count--
                    this.tableData.push({
                        id: count,
                        date: "2016-05-02"
                    })
                }
            },
            computed: {
                // 是否禁止无限加载
                disabledLoad() {
                    return false
                },
                visibleData() {
                    return this.tableData.slice(0, Math.min(this.tableData.length, this.visibleCount))
                }
            },
            directives: {
                'load-more': {
                    bind (el, binding, vnode) {
                        const { expand } = binding.modifiers
                        // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
                        if (expand) {
                            /**
                             * target 目标DOM节点的类名
                             * distance 减少触发加载的距离阈值，单位为px
                             * func 触发的方法
                             * delay 防抖时延，单位为ms
                             * load-more-disabled 是否禁用无限加载
                             */
                            let { target, distance = 1, func, delay = 200 } = binding.value
                            if (typeof target !== 'string') return
                            let targetEl = el.querySelector(target)
                            if (!targetEl) {
                                console.log('Container Not Found')
                                return
                            }
                            binding.handler = debounce(function () {
                                const { scrollTop, scrollHeight, clientHeight } = targetEl
                                let disabled = el.getAttribute('load-more-disabled')
                                disabled = vnode[disabled] || disabled

                                if (scrollHeight <= scrollTop + clientHeight + distance) {
                                    if (disabled) return
                                    func && func()
                                }
                            }, delay)
                            targetEl.addEventListener('scroll', binding.handler)
                        } else {
                            binding.handler = helper.debounce(function () {
                                const { scrollTop, scrollHeight, clientHeight }  = el
                                if (scrollHeight === scrollTop + clientHeight) {
                                    binding.value && binding.value()
                                }
                            }, 200)
                            el.addEventListener('scroll', binding.handler)
                        }
                    },

                    unbind (el, binding) {
                        let { arg } = binding
                        // 使用更丰富的功能，支持父组件的指令作用在指定的子组件上
                        if (arg === 'expand') {
                            /**
                             * target 目标DOM节点的类名
                             * offset 触发加载的距离阈值，单位为px
                             * method 触发的方法
                             * delay 防抖时延，单位为ms
                             */
                            const { target } = binding.value
                            if (typeof target !== 'string') return
                            let targetEl = el.querySelector(target)
                            targetEl && targetEl.removeEventListener('scroll', binding.handler)
                            targetEl = null
                        } else {
                            el.removeEventListener('scroll', binding.handler)
                            el = null
                        }
                    }
                }
            },
            methods: {
                async loadmore() {
                    console.log('滚动到底部了')
                    this.pageIndex++
                    await this.scrollMethod(this.pageIndex, this.pageSize)
                    this.visibleCount += 10
                    if (this.visibleCount > this.tableData.length) {
                        this.content = '暂无更多数据'
                    }
                },
                //动态加载表数据方法
                async scrollMethod(pageIndex, pageSize){
                    this.query.page = pageIndex
                    this.query.size = pageSize
                    let count = 1
                    console.log('应该添加新数据啦');
                    while(count <11) {
                        count++
                        this.tableData.push({
                            id: pageIndex+count,
                            date: "2016-05-02"
                        })
                    }
                    /**
                     * 添加数据
                     * /
                    /*if(this.checkQuery()){
                        let result = await findPage(this.query)
                        if (result) {
                            this.dataList = result.list
                            //累加
                            if(this.dataList.length>0){
                                let i =0 ;
                                for(i;i< this.dataList.length ;i++){
                                    this.tableData.push(this.dataList[i])
                                }
                            }
                        }
                    }*/
                },
                //强制重新加载子组件
              /*  rebuileComponents() {
                    // 销毁子标签
                    this.hackReset = false;
                    // 重新创建子标签
                    this.$nextTick(() => {
                        this.hackReset = true;
                    });
                },*/

            }

原文链接：https://blog.51cto.com/u_15301254/4842790