vue elementUI 表格组件添加滚动触底监听事件

夕降巫咸

已于 2024-07-01 16:52:06 修改

阅读量346

点赞数 4

文章标签： vue.js 前端 javascript elementui

于 2024-06-25 10:16:12 首次发布

本文链接：https://blog.youkuaiyun.com/Changeable0127/article/details/139951460

版权

    //用户表格注册滚动事件
    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) {