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

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

版本：vue2

组件：el-tree

template:

<!--
非完整代码
树需要指定高度，或继承有效的父级高度
icon-class="xxx"定义一个没有定义的类型会去掉菜单的icon
-->
    <el-tree
      class="user-list filter-tree tree-scrollbar"
      :data="treedata"
      node-key="id"
      highlight-current
      @node-click="nodeClick"
      :indent="10"
      icon-class="xxx"
      ref="menutree">
      <div class="ds-custom-tree-node" slot-scope="{ data }">
        <div class="tree-title-wrap">
          <div class="tree-title" :title="data.name" >{{data.name?data.name:data.account}}</div>
          <div class="tree-sub" v-show="data.name" >{{data.account}}</div>
        </div>
      </div>
    </el-tree>

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)<this.clientHeight){
        if((that.currentpage/1*that.pagesize)<that.total){//当前已加载的数据需要小于总条数
          that.currentpage = that.currentpage/1 + 1;//
          that.loading=true;//加载下一页的时候给一个缓冲罩子
          that.getUser(that.searchkey)//带搜索参数
        }
      }
    })
  },
/**
* 按需决定是否使用异步加载
* 本项目使用的是GQL语句请求，按需换成axios或其他
**/
async getUser(keywords){
      this.currentpage=this.currentpage?this.currentpage/1:1;
      var variables={
        offset:((this.currentpage-1)*this.pagesize)?((this.currentpage-1)*this.pagesize):0,//查询起始位置
        first:this.pagesize,//每页数量
        keywords:this.searchkey
      }
      if(this.activefilter){
        variables.filter={};
        if(this.activefilter){
          variables.filter.active={
            eq:this.activefilter
          }
        }
      }
      await this.$apolloclient.query({
        query: gqlreq.rcsimpleusers,
        variables: variables
      }).then((res)=>{
        // 请求失败
        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：接口请求到数据，处理后接在之前的数据之后

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

以上