原文連結：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