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(){
}
更多推荐
所有评论(0)