elementUI 实现列表树滚动到底部后加载更多

需求：项目实际开发中可能，列表树可能不能显式的给到分页按钮，大多时候会使用目标滚动到底部后触发下一页数据的加载

版本：vue2

组件：el-tree

template:

    
      

        

          
{{data.name?data.name:data.account}}
          
{{data.account}}
        
      
    

script

methods:{
  /**
  * 需要先初始化该监听器，且应注意不要重复监听
  * 注意vue的this和监听器内部的this区分
  * 滚动到最底部的时候currentpage加1
  * **/
  loadMoreUser(){
    const that = this;
    document.querySelector('.user-list').addEventListener('scroll', function () {
      // scrollHeight: 内容区域的总高度
      // clientHeight: 内容可视区域的高度
      // scrollTop: 滚动距离顶部的位置
      // 总高度减距离顶部的距离再减5判断是否小于可视区域的高度，根据需要按需调整
      if (parseInt(this.scrollHeight - this.scrollTop - 5){
        // 请求失败
        if(res.errors&&res.errors[0]){
          this.$message({
            type:"warning",
            message:res.errors[0].message
          })
        }else if(res.data&&res.data.users){//接口请求成功
          this.total = res.data.users.totalCount;
          let newlist= commonjs.takeoffEdges(res.data,'users');
          this.treedata= this.treedata.concat(newlist);//请求的新数据跟在旧数据后
        }
      })
      // 等接口结束后关闭loading
      this.loading=false;
    },
}

注意：
1：列表树需给定高度
2：滚动前需增加滚动事件的监听器，且注意不要重复监听
3：滚动到底部需计算已加载数据是否小于总数据，小于总数据才能继续加载，否则应告知用户已加载完毕
4：接口请求到数据，处理后接在之前的数据之后

如有更好的解决方式请甩给我链接哦~

以上