el-table 流加载

weixin_53545517

于 2024-09-04 14:37:18 发布

阅读量159

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53545517/article/details/141893334

版权

自定义组件

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('没找到元素')

        }

    },

},
<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(){

}