知行网站建设wordpress英文仿站教程

使用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(){

}