小谢第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的问题就没有了
既然许愿了,就努力去实现