elmentUI多级菜单动态显示

背景：根据后端返回数据生成多级菜单，菜单项可能会有很深的层级，如果直接使用elementUI 去编写会写很深的层级，代码繁杂，一旦后面菜单项有改动又不利于维护

如何做到多级菜单？使用递归组件

elmentUI原本写法：

      
        
        
          
          选项1
        
      
      
        
        导航四
      
    

使用递归组件写法：

主要思路：

• 通过数据查找hasOneChild()判断是否有children，有证明有子菜单，有子菜单使用el-submenu封装的组件
• SidebarItem.vue组件内部调用自己的组件；
• 渲染元素组件Item.vue使用函数式组件写法；

 // 判断当前菜单是否有子菜单
    hasOneChild(children = [], item) {
      // 判断如果菜单是隐藏直接不显示
      // if(item.hidden) return false;
      if (children.length === 0) return false;
      const showChildArr = children.filter(child => {
        console.log(child);

        if (child.hidden) return false;
        else return true;
      });

      // 没有找到child说明没有子菜单
      if (showChildArr.length === 0) {
        this.oneChild = { ...item, path: item.path, noShowChild: true };
        return true;
      }
      console.log(this.oneChild, "this.oneChild");

      return false;
    },

函数式组件Item.vue写法：

1. functional:true定义组件为函数式组件；
2. props接收父级传入属性；
3. render函数生成虚拟节点；