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

}

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐