element-ui el-table 滚动到底部,进行加载下一页

使用element-ui 自带的InfiniteScroll 无限滚动组件无法使用在table里面,所以项目只能组件写一个

俺的方法是写了一个自定义组件,进行监听滚动条是否拉到最底部进行一个处理。方法如下

直接复制完事了,

loadTableMore: {

    bind(el, binding) {

        // 获取当前滚动的节点,注意必须要有高度

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

        if (selectWrap) {

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

                let sign = 3

                // 这个sign值,只是为了滚动到最底部3px的时候加载

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

                if (Math.ceil(scrollDistance) <= sign) {

                    // 到这里 就会执行方法了

                    binding.value()

                }

            })

        } else {

            console.log('没找到元素')

        }

    },

},

在table 绑定如下

因为我当时是写的html模板,所以 v-load-table-more,正常的vue模板 可以直接v-loadTableMore

<el-table :data="tableData" :border="false" :height="tableHeight" v-load-table-more="infiniteScrollLoad" >

    <el-table-column fixed label="排名" width="50" prop="RowIndex" align="center"> </el-table-column>

    <el-table-column fixed label="排名" width="50" prop="RowIndex" align="center"> </el-table-column>

    <el-table-column fixed label="排名" width="50" prop="RowIndex" align="center"> </el-table-column>

    <el-table-column fixed label="排名" width="50" prop="RowIndex" align="center"> </el-table-column>

</el-table>

方法里面写上,就可以监听到达底部的回调函数了

infiniteScrollLoad(){

}文章来源地址https://uudwc.com/A/Gd0EG

原文地址:https://blog.csdn.net/weixin_45114701/article/details/132831803

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

上一篇 2023年09月19日 19:06
nvm 实战过程
下一篇 2023年09月19日 19:06