美文网首页
el-table的自定义滚动加载指令以及踩到的坑

el-table的自定义滚动加载指令以及踩到的坑

作者: sunhuihuibuhui | 来源:发表于2019-05-06 14:23 被阅读0次

    创建自定义指令,命名为loadmore

    directives: {

        loadmore: {

            bind(el, binding) {

                const selectWrap = el.querySelector('.el-table__body-wrapper')

                selectWrap.addEventListener('scroll', function() {

                    let sign = 200;

                    const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight

                    if( this.scrollHeight == this.clientHeight ) return //没有滚动条

                     if ( scrollDistance <= sign) {

                          binding.value()

                     }

                })

            }

        }

    },

    在要滚动的区域绑定指令


    声明一个布尔值,默认为true,即表示可以滚动加载,滚动加载暂时关闭防止多次滚动一起请求数据,如果当前页加1后大于总页数或者当前数据只有一页,提示已经加载完毕并返回,否则的话,设置一个定时器,调用list,并再次允许滚动

    loadMore() {

        if (this.busy) {

            this.busy = false;

            this.currentPage++;

            if(this.currentPage > this.totalPage || this.totalPage == 0){

                this.$message.warning('已经到底了~')

                return

            }

            setTimeout(() => {

                this.getList()

                this.busy = true

            }, 100)

        }

    }

    调用list的时候,由于一次性只请求固定条数的数据,相当于是分页模式但是把最新请求的数据追加到表格中,所以要给table绑定的data重新赋值,然后渲染showList就可以了

    this.showList = this.showList.concat(res.varList)

    相关文章

      网友评论

          本文标题:el-table的自定义滚动加载指令以及踩到的坑

          本文链接:https://www.haomeiwen.com/subject/zsiroqtx.html