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

版本：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：接口申请到数据，解决后接在之前的数据之后

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

以上