vue el-tree获取5层层级关系代码,感觉我这样写的很啰嗦?

用el-tree做一个组织结构展示,要求展示5层层级关系代码(这里不包括祖辈,我可能说不明白,看下图),我虽然实现了效果,但是感觉我这样写的很啰嗦,但是想优化一下又不知道该怎么优化,求大佬们帮我看看怎么写比较好,小弟感激不尽。

getOrgnizes().then((res) => {
      let arr = [];
      res.forEach((i) => {
        if (i.child && i.child.length) {
          i.child.forEach((j) => {
            if (j.child && j.child.length) {
              j.child.forEach((k) => {
                if (k.child && k.child.length) {
                  k.child.forEach((l) => {
                    if (l.child && l.child.length) {
                      l.child.forEach((m) => {
                        if (m.child && m.child.length) {
                          m.child.forEach((n) => {
                            if (n.child && n.child.length) {
                              // n.disabled = true;
                              delete n.child;
                            }
                          });
                        }
                      });
                    }
                  });
                }
              });
            }
          });
        }
        arr.push(i);
      });
      this.treeData = arr;
    });
阅读 2.3k
2 个回答

方法一:深搜(DFS)/递归

const limitLevel = (tree, level) => {
  if (!tree) return
  for (const node of tree) {
    if (level == 1) delete node.child
    else limitLevel(node.child, level - 1)
  }
}
// 利用可选链简写版
// const limitLevel = (tree, level) => tree?.forEach(node => {
//   if (level == 1) delete node.child
//   else limitLevel(node.child, level - 1)
// })

limitLevel(res, 5)
this.treeData = res

方法二:广搜(BFS)

const limitLevel = (tree, level) => {
  while (--level) tree = tree.flatMap(node => node.child || [])
  tree.forEach(node => delete node.child)
}

limitLevel(res, 5)
this.treeData = res

写一个递归函数, 然后可选择性的判断深度

function recurseFun(arr, deep, curDeep = 1){
  if(arr.child && arr.child.length){
    if(deep === curDeep) {
        if (arr.child && arr.child.length) {
          delete arr.child;
        }
        return arr
    }
    return recurseFun(arr.child, deep, ++curDeep)
  }
  return arr
}

// 调用
recurseFun(data, 5)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏