el-table滚动条分页

     <script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
             options: [],
                item_cd: '',
                sys_date: '',
                computer_date: '',
                clienHeight: '600',
                loading: false,
                itemKey: '0',
                allData: [],
                page: 1,
                nums: 15,
                total:0,
                next: true,//是否可加载下一页
                activeName: 'summary',
                is_page:true

            }
        },
        created() {
            this.getSummaryData();
        },
        mounted() {
            document.querySelector(".el-table__body-wrapper").addEventListener(
                'scroll', (e) => {
                    this.getScroll(e)
                },true)

        },
        methods: {
            timestampToTime(today) {
                var DD = String(today.getDate()).padStart(2, '0'); // 获取日
                var MM = String(today.getMonth() + 1).padStart(2, '0'); //获取月份，1 月为 0
                var yyyy = today.getFullYear(); // 获取年

                var today = yyyy + '-' + MM + '-' + DD
                return today;
            },
            getSummaryData() {
                this.loading = true;
                var json = {
                    sys_date: this.sys_date,
                    item_cd: this.item_cd,
                    computer_start_date: this.computer_date[0],
                    computer_end_date: this.computer_date[1],
                    page:this.page,
                    nums:this.nums
                }
                $.get("", json, (res) => {
                    res = JSON.parse(res)
                    if (res.code === 200) {
                        this.loading = false;
                        if (this.page==1&&this.is_page==false){
                            this.allData=[];
                            $('.el-table__body-wrapper').animate({scrollTop: 0}, 500);
                        }
                        this.allData =this.allData.concat(res.data.data);
                        this.total=res.data.total
                        this.options = res.data.item_data;
                        this.clienHeight = '80vh'
                        this.is_page=true;
                        this.next=true;
                        console.log(this.clienHeight)
                    }else {
                        that.loading=false;
                        that.$message({
                            message: res.data.message,
                            type: 'warning'
                        });
                    }

                })

            },
            getScroll(event){
                // let isLoading = true;//是否有数据可以加载
                var that=this;
                that.$nextTick(() => {
                    $(".el-table__body-wrapper").scroll(function(){

                        var divHeight = $(this).height();

                        var nScrollHeight = $(this)[0].scrollHeight;

                        var nScrollTop = $(this)[0].scrollTop;

                        if(nScrollTop + divHeight >= nScrollHeight&that.next) {
                            that.next=false;
                            that.loading=true;
                            that.page = that.page + 1;//每次分页+1
                            // alert(that.page)
                            if(that.page<=Math.ceil(that.total/that.nums)){
                                that.getSummaryData()
                            }else if (that.allData.length>=parseInt(that.total)){
                                // alert(that.page)
                                that.$message({
                                    message: '到最后一条了哦~',
                                    type: 'warning'
                                });
                                that.next = false;
                                that.loading = false;//无数据可以加载
                            }

                        }

                    });
              
                })

            },
            onExport() {
                var href = '';
                var a = document.createElement('a');  // 创建下载链接
                a.href = href;
                a.target = '_blank';  // 新开页下载
                document.body.appendChild(a);  // 添加dom元素
                a.click();  //  点击下载
                document.body.removeChild(a); // 下载后移除元素
                window.URL.revokeObjectURL(href); // 下载后释放blob对象
            },
            onImport() {
                $("#upload").click()
            },
            // 表格转base64
            getFile(file) {
                var that = this;

                let data = new FormData();
                data.append('excel', file.target.files[0]);
                $.ajax({
                    url: '',
                    type: 'POST',
                    data: data,
                    cache: false,
                    //不对FormData中的url进行编码，原样发送
                    processData: false,
                    //不修改contentType属性，使用默认
                    contentType: false,
                    success: function (res) {
                        res = JSON.parse(res)
                        if (res.code == '200') {
                            that.getSummaryData()
                            // this.getStaffList();

                            that.$message({
                                message: res.message,
                                type: 'success'
                            });
                            $("#upload").val("")
                        } else {
                            that.$message.error(res.message);
                        }
                    }
                })
            
            },
            //设置表头的颜色
            getRowClass({row, column, rowIndex, columnIndex}) {
                return 'background:#558FC5 !important;'

            },
            //设置指定行、列、具体单元格颜色
            cellStyle({row, column, rowIndex, columnIndex}) {

                /*  if (rowIndex % 2 == 0) {
                      return 'background:#EFF0F5 !important;'
                  } else {
                      return 'background:#F3F4F8 !important;'

                  }*/
            },


        },
    })
</script>