//用户表格注册滚动事件
initTableScrollEvent() {
this.$nextTick(() => {
//userTableRef 你的组件的ref
if(this.$refs.userTableRef && this.$refs.userTableRef.bodyWrapper){
const tableBodyWrapper = this.$refs.userTableRef.bodyWrapper;
if (tableBodyWrapper) {
this.debouncedScroll = this.debounce(this.handleScroll, 100);
tableBodyWrapper.addEventListener('scroll', this.debouncedScroll);
}
}
});
},
//注销滚动事件 一般可以在离开当前组件的生命周期调用 也可以在当前页面不需要滚动事件的地方调用
removeTableScrollEvent() {
if(this.$refs.userTableRef && this.$refs.userTableRef.bodyWrapper){
const tableBodyWrapper = this.$refs.userTableRef.bodyWrapper;
if (tableBodyWrapper) {
tableBodyWrapper.removeEventListener('scroll', this.debouncedScroll);
}
}
},
//防抖动,避免在滚动过程中多次重复调用
debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
},
//滚动事件具体执行的地方
handleScroll(event) {
// 判断是否滚动到底部
const { scrollTop, scrollHeight, clientHeight } = event.target;
const isReachBottom = scrollTop + clientHeight >= scrollHeight - 5;
if (isReachBottom) {
//触底了 可以写具体的逻辑代码
}
},
vue elementUI 表格组件添加滚动触底监听事件
于 2024-06-25 10:16:12 首次发布