小谢第24问：关于树组件懒加载时候，一直显示loadding的问题

今天在做elementui 树组件懒加载时候，如果自己节点过多会一直处于加载状态，查看文档，代码如下：

loadNode(node, resolve) {
        if (node.level === 0) {
          return resolve([{ name: 'region' }]);
        }
        if (node.level > 1) return resolve([]);

        setTimeout(() => {
          const data = [{
            name: 'leaf',
            leaf: true
          }, {
            name: 'zone'
          }];

          resolve(data);
        }, 500);
      }

查看源代码可知，loadNode这个函数是通过promise封装，因此必须用resovle返回，但是我查看自己的代码之后，发现自己已经resolve了数据，如下：

 

    load(tree, treeNode, resolve) {
      api.getGroup(this.curTree.id, tree.id).then(res => {
        if (res.code == 0 && res.data.list) {
          resolve(this.resolveTableData(res.data.list)); 
        } else {
          resolve([]);
        }
      });
    },

显然，问题的原因在于resolveTableData这个函数里面，于是我又查看了resovleTableData这个函数,如下：

resolveTableData(arr) {
            arr.forEach(async item => {
                let appends = '&f_in_device_type=';
                this.inspectTypes.forEach(n => {
                    appends += n + ',';
                });
                appends = appends.substr(0, appends.length - 1); 
                let params = {
                    treeId: '&targetTree=' + this.curTree.id,
                    groupId: '&targetGroup=' + item.id,
                    'targetGroupRelation': '&targetGroupRelation=descendantsAndMe&just_count_total=true',
                    'appends': appends
                };
                await api.getDevNum(params).then(res => {
                    item.devNum = res.data.total;
                }); 
                item.leaf = !item.leaf; 
                item.attr.lsxjMaxThread = item.attr.lsxjMaxThread ? item.attr.lsxjMaxThread : 0;
            });
            return arr;
        },

上面用到了两次for循环，第一次是为了得到arr的值，第二次是因为需要for 循环获取参数params，然后将其拼接到下一个函数当中，在上一篇随笔已经讲过为什么会使用async await了，因此现在不做说明

问题的原因就在于我加的async，因为将异步调用置换为同步，但是下面item.leaf = !item.leaf; 这个赋值还是异步的，因此在加载的时候会出现上面同步的两个函数还没有加载成功，子组件的loading便得到了返回值，

load在resolve之后，仍然是 !item.leaf的状态，因此：我将item.leaf = !item.leaf做了同步处理;

                setTimeout(() => {
                    item.leaf = !item.leaf;
                }, 100);

这样，loading的问题就没有了