element ui 表单树形图懒加载

   
    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 || [];
        })
    }

你可能感兴趣的:(element ui 表单树形图懒加载)