element ui 表单树形图懒加载

   <el-table
      ref="treeTable" 
      :data="绑定数据"
      :expand-row-keys="expands"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      :default-expand-all="true"
      height="500" // 表单设置高度
      :tree-props="{children: 'childrens', hasChildren: 'hasChildren'}"
    >

    data() {
      return {
          formData: {
            pageIndex: 1,
            pageSize: 20
          },
      }
    }
    mounted(){
        this.load();
    }
    load() {
      // 获取需要绑定的table
      this.dom = this.$refs.treeTable.bodyWrapper;
      this.dom.addEventListener('scroll', () => {
        // 滚动距离
        const scrollTop = this.dom.scrollTop;
        // 变量windowHeight是可视区的高度
        const windowHeight = this.dom.clientHeight || this.dom.clientHeight;
        // 变量scrollHeight是滚动条的总高度
        const scrollHeight = this.dom.scrollHeight || this.dom.scrollHeight;
        if ((scrollTop + windowHeight + 1) >= scrollHeight) {
          console.log(scrollTop + windowHeight, 'scrollTop + windowHeight + 1', scrollHeight);
          // 获取到的不是全部数据 当滚动到底部 继续获取新的数据
          console.log(this.Data.childrens.length, this.childrensOther.length);
          if (this.Data[0].childrens.length != this.childrensOther.length) {
            this.getMoreLog();
          }
        }
      });
    },
    getMoreLog() {
      this.formData.pageIndex++;
      this.dom.scrollTop = this.dom.scrollTop - 100;
      const num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
      this.Data[0].childrens = this.childrensOther.slice(0, num);
    }
    getDetail() {
        //api
        
        .then(res => {
            // 获取res
             this.childrensOther = res.data || [];
        })
    }