element树形图el-tree的懒加载和分页加载

假如我们的树形图含有大量的数据，一次全部加载出来会很慢，用户体验不好，所以我们要做数据的分级加载，也就是懒加载，但如果每级的数据量也很大，就需要每一级都做分页加载了。

懒加载

数据懒加载elementUI给出了方法，这里不再赘述，链接如下：https://element.eleme.cn/#/zh-CN/component/tree

分页加载+懒加载

如果我们既需要数据的懒加载，也需要数据的分页加载，那么我们便不能使用elementUI提供的懒加载方法了，因为我们没有办法在分页加载时拿到loadNode函数的所需要的参数node和resolve。

先来说下我们的需求：

• 数据分级加载
• 每级数据分页加载
• 点击树形图的每一项时，该项高亮，并派发事件
• 分页加载的触发方式为在固定高度的区域上拉加载更多
• 在别的模块显示树形图点击层级，eg:XXX总公司/北京分公司/研发部/前端
• 默认展开树形图的第一项

看下我们的页面：

    
        //绑定树形图上拉加载更多数据
        
        //加载数据时loading状态
            
                
                    
                        
                        
                            {{ data.name }}
                        
                        
                            ({{ data.user_count }})
                        
                    
                
            
        
    

上拉加载更多的实现

/**
 * 滚动加载
 * @return {Boolean} 滚动加载开关
 */
scrollLoad(event) {
    let target = event.target;
    const offsetHeight = target.offsetHeight;
    const scrollTop = target.scrollTop;
    const scrollHeight = target.scrollHeight;
    if ((offsetHeight + scrollTop) - scrollHeight >= -100) {
        return true;
    } else {
        return false;
    }
},
/**
 * 判断当前tab是否需要滚动加载
 * @param {String} name 那个地方触发了滚动加载
 */
rollingLoad(event) {
    clearTimeout(this.scrollTimer)
    this.scrollTimer=setTimeout(()=>{
      if (this.scrollLoad(event) && this.scrollLoadingFlag) {  //scrollLoadingFlag为true说明可以进行下一次请求
          this.checkedData.page += 1;      //下一次请求时，pn++
          this.loadData(this.checkedData.id, this.checkedData, this.checkedData.page)        //请求函数
      }
  },300)
},

加载数据

首先分析下我们需要在加载数据的时候有哪些情况：

• 第一次加载最外层数据，此时需要一个初始id，这个id我们是知道的，在我的项目里为-1，需要当前层级pn为0，还需要默认选中第一项，并展开（展开意味着加载它的下一级数据）
• 当前层级数据的分页加载，此时需要当前数据的pn值和id，还需要当前层级的数据数组，以便在我们请求回来数据后进行拼装
• 请求下一层数据，此时需要当前层级的id值，pn为0，还需要当前点击的item的值，以便在我们请求会回数据后，把数据设置为item的children属性，去渲染下一层数据

综上，我们的每一次请求都需要一个id值，一个pn值，最好还有一个当前点击的item。所以loadData()函数接收3个形参，即loadData(id,data.pn)

我们可以在element文档中发现，当节点被展开和点击时，我们都可以拿到当前节点的数据，当前节点的 Node 对象。

image.png

所以我们可以使用如下方法去加载数据：

loadData(parent_id = -1, data = {children: []}, pn = 0){
    this.loading=true;    //设置loading状态
     //如果pn=0,data.children的长度大于0 ，说明该级数据已经加载过，应该是树形被合上又展开的操作
    //正常加载数据时，pn==0的同时data.children==0说明第一次加载该级数据
    //pn!=0,data.children.length>0,分页加载该级数据
    if (pn === 0 && data.children.length && data.children.length > 0) {
        return; 
    }
    this.scrollLoadingFlag=false;            //加载开关关闭
    let params = {
        parent_id: parent_id,
        pn: pn,
        pl: this.pl,
        type: this.type
    };
    this.$axios
        .get(
            `XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX`,
            { params: params }
        )
        .then(res => {
            this.scrollLoadingFlag=true;              //加载开关打开
            this.loading=false;                              
            let { list } = res.data||[];
            // 重置滚动加载事件开关
            if (list.length < this.pl) {
                this.scrollLoadingFlag = false;      //如果获取到的数据小于pl，数据加载完，关闭开关
            }
            //初始化右侧数据
            list.map((v, i) => {
                if (v.subordinate_count > 1) {        //，subordinate_count 大于1说明有下一级
                    v["isLeaf"] = false;
                    v["children"] = [];
                }
            })
            if(parent_id&&parent_id===-1){      //如果是第一级数据
                list.map(v=>{
                    v["icons"] = "el-icon-max-zuzhijiagou-";
                })
                list[0]["isChecked"] = true;        //默认选中第一级数据第一个
                this.defaultExpanded=[list[0].id];        //默认展开第一级数据第一个
                this.checkList.push(list[0]);        //缓存点击层级顺序
                this.checkedData=list[0];           //缓存点击层级顺序
                this.loadData(list[0].id, list[0], list[0].page, list[0]);        //加载默认展开的下一级数据
            }
            // 判断当前节点是要添加子节点还是滚动加载
            if (this.departmentData.length === 0 && pn === 0) {      //如果树形图数据长度为0并且pn=0，说明第一次加载数据，直接赋值
                this.departmentData = list;
            } else if (data.children && data.children.length === 0) {        //如果当前点击项children长度等于0，说明第一次加载下一级
                this.$set(data, "children", list)
            } else {
                data.children = data.children.concat(list)        //其他情况为分页加载，拼接数据
            }
        })
        .catch(err => {
            this.loading=false;
            this.scrollLoadingFlag=true;
            this.$message.closeAll();
            this.$message.error("请求超时");
        });
},

节点展开

/**
 * 节点被展开
 * @param {Object} e tree的node节点数据
 * @param {Object} node tree的node的props数据
 */
departmentNodeExpand(e, node) {
    console.log(e, '节点展开')
    this.checkedData = e;
    if (e.isLeaf && node.isLeaf||(e.children&&e.children.length>0)) return;
    this.loadData(e.id, e, e.page);
},

节点点击

/**
 * 节点被点击
 * @param {Object} e tree的node节点数据
 */
departmentNodeClick(e, node, a) {
    this.handleGray(this.checkList);        //将被点击列表取消高亮
    this.$store.dispatch("set_getRequestUser", Object.assign({}, {    //往外派发点击数据
        id:e.id,
        name:e.name
    }));
    this.checkedData = e;      //设置checkedData 
    this.parent_id = e.id;
    this.checkList = [];
    this.handleBlue(node);        //将选中项高亮
},

其他方法

handleBlue(node) {
    if (node.parent) {
        this.checkList.push(node.data);
        this.handleBlue(node.parent);
    } else {
        this.checkList.reverse();
        this.checkList.map(v => {
            v["isChecked"] = true;
        });
        this.$store.dispatch("set_getRequestUserAll",JSON.parse(JSON.stringify(this.checkList)));
        return;
    }
},
handleGray(arr){
    arr.map(v=>{
        v['isChecked']=false;
    })
}