树形结构控制顶部菜单栏和侧边栏

记录一下 开发时遇到的利用树形结构控制顶部，侧边栏

第一个 需要注意的是 选中菜单后 需要获取父级菜单和根节点菜单 这里就设计到了菜单栏的路径，

我是使用的elementui的tree组件 子元素和父元素 严格的不相关 选中菜单 只会返回当前项的内容

所以需要获取路径

获取和回显我都写的递归来处理 暴力了一下 已加入优化行列了

获取元素路径（当前元素->父节点->根节点）

gettree(tree, options) {
  var brr = [];
  tree.forEach((element) => {
    brr.concat(getNodeRoute(options, element.menuCode));
  });

  function getNodeRoute(tree, targetId) {
    for (let index = 0; index < tree.length; index++) {
      if (tree[index].children) {
        let endRecursiveLoop = getNodeRoute(tree[index].children, targetId);
        if (endRecursiveLoop) {
          brr.push(tree[index].menuCode);
          return true;
        }
      }
      if (tree[index].menuCode === targetId) {
        brr.push(tree[index].menuCode);
        return true;
      }
    }
  }
  return brr;
},

回显时 后端直接给我传过去的id（ 父节点 根节点也传回来了 ） 按照tree组件的特点 直接使用会出现 明明不是全选 但是页面上 父节点 根节点 下面的元素都被选中的错误情况

这时我测试了一下 底层元素全部选中 父节点和根节点也会显示被选中

所以这时 只需要获取 无子级元素的菜单

 getsingle(trees, menuCode) {
  var brr = [];
  for (let i = 0; i < trees.length; i++) {
    let element = trees[i];
    fn(element, menuCode);
  }

  function fn(element) {
    if (element.menuCode == menuCode && !element.children) {
      brr.push(element);
    }
    if (element.children) {
      if (Array.isArray(element.children)) {
        element.children.forEach((elements) => {
          fn(elements);
        });
      } else {
        fn(elements);
      }
    }
  }
  return brr;
},