jeecg前端部分，antd pro vue，前端菜单改成顶部一级左右二三级菜单，jeecg是在antd基础更改的，所以antd-design-vue菜单一二级更改类似

首先最近项目需要把jeecg前端部分菜单栏改成顶部一级左边二三级菜单，由于jeecg或者antd pro vue开源版本菜单只有顶部或者侧边 两种模式，所以没办法只能再次基础上改成需要的模式。
最后做成效果图如下（并没有美化只是先实现了需求）

实现过程如下可参考：
1、首先我们在jeecg菜单模式为horizontal 的基础上更改
第一步：实现的是顶部菜单只有一级的情况下路由可以跳转；如有二三级菜单点击没有效果
①找到这个文件
109行左右改成 这样就完成了第一个需求 此时顶部菜单只有只用于一级菜单的情况下会跳转，有二三级的话点击后没有反应

// render
    renderItem (menu) {
        if (!menu.hidden) {
          // 测试顶部导航hover 二三级菜单不显示【不生成】
          return this.renderMenuItem(menu)
        }
      return null
    },

在 renderMenuItem (menu)下加上

		var tag = target && 'a' || 'router-link'
      // 测试顶部item点击后不跳转
      if (menu.hasOwnProperty('children')) {
        tag ='a'
      }

②第二步完成点击拥有二三级菜单的菜单项时左侧显示 ，点击只有一级的菜单时做小隐藏
先做显示：步骤第一步点击有二三级的菜单时子传父参数为当前点击menu对象传给

在renderMenuItem (menu)下添加代码

 var on = {
        click: () => {
          this.$emit('iteminfo',menu)
        },
     }

 var cc;
      if (menu.hasOwnProperty('children')) {
        cc =
          <Item {...{ key: menu.path }}>
          <tag  {...{ on:on }}>
          {this.renderIcon(menu.meta.icon)}
          <span>{menu.meta.title}</span>
        </tag>
      </Item>
      } else {
        cc = 
          <Item {...{ key: menu.path }} {...{on:on }}>
          <tag {...{ props, attrs }} >
            {this.renderIcon(menu.meta.icon)}
            <span>{menu.meta.title}</span>
          </tag>
        </Item>
      }

      return (
        cc
        // <Item {...{ key: menu.path }}>
        //   <tag {...{ props, attrs }}>
        //     {this.renderIcon(menu.meta.icon)}
        //     <span>{menu.meta.title}</span>
        //   </tag>
        // </Item>                
      )

在子传父传给
在上面那个文件里更改如下代码

<s-menu
              mode="horizontal"
              :menu="menus"
              :theme="theme"
              @iteminfo='iteminfoHandle'
              typeM='top'
              ></s-menu>

方法里加

 iteminfoHandle(e){
          this.$emit('iteminfoto',e)
      },

2、至此父元素获取到了点击项的menu 接下来通过点击项的menu动态添加删除侧边菜单具体侧边菜单如何添加参考ant design vue 的menu
在这里面

找到修改为如下

 <a-layout
      :class="[layoutMode, `content-width-${contentWidth}`]"
      :style="{ paddingLeft: fixSiderbar && isDesktop() ? `${sidebarOpened ? 200 : 80}px` : '0' }"
    >
      <!-- layout header -->
      <global-header
        :mode="layoutMode"
        :menus="menus"
        :theme="navTheme"
        :collapsed="collapsed"
        :device="device"
        @toggle="toggle"
        @iteminfoto="itemINfotwo"
      />

      <a-layout>
        <side-menu
        //这里通过 iteminfo有没有children来判断有没有二三级菜单从而动态添加侧边菜单
        v-if="iteminfo!=null && iteminfo.hasOwnProperty('children')"
          mode="inline"
          :menus="iteminfo"
          @menuSelect="menuSelect"
          :theme="navTheme"
          :collapsed="false"
          :collapsible="true"
        ></side-menu>
        <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '59px' : '0' }">
          <slot></slot>
        </a-layout-content>
      </a-layout>
    </a-layout>

  </a-layout>

3、添加侧边菜单

伸缩功能 由于官网提供的是在这种布局下的伸缩

我们要做的是这种布局下的
所以上线那种方式添加

<a-layout-sider v-model="collapsed" :trigger="null" collapsible>

没有效果具体也没深究为什么 我就做了一个按钮 ant官网也有实例可以去参考

所以在做法如下

找到这个文件修改如下

<a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="200px"
    :collapsible="true"
    :trigger="null">
    <!-- <logo /> -->
   // 在此处添加按钮并添加点击事件
    <a-icon :type="lalal?'menu-unfold':'menu-fold'" @click='jjjjj'  class="collapsedIcon"/>
    <s-menu
      :collapsed="true"
      :menu="menus"
      :theme="theme"
      @select="onSelect"
      :mode="mode"
      :style="smenuStyle"
      typeM='side'>
    </s-menu>
  </a-layout-sider>

 data() {
      return {
        lalal:false
      }
    },

jjjjj(){
        this.lalal=!this.lalal
      }

这样就有了按钮点击菜单栏伸缩功能
4、点击顶部有二三级菜单时左侧菜单生成相对应的二三级菜单
找到index。js 修改render函数如下

 if (this.menu.hasOwnProperty('children')) {
      console.log(this.menu);
      const { mode, theme, menu } = this
    const props = {
      mode: mode,
      theme: theme,
      openKeys: this.openKeys
    }
    const on = {
      select: obj => {
        this.selectedKeys = obj.selectedKeys
        this.$emit('select', obj)
      },
      openChange: this.onOpenChange
    }
    // var subinfo=this.renderSubMenu(menu)
    const menuTree = menu.children.map(item => {
      if (item.hidden) {
        return null
      }
      return this.renderItem(item)
    })
    // {...{ props, on: on }}
    return (
      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
         {menuTree}
      </Menu>
    )
    } else {
      const { mode, theme, menu } = this
    const props = {
      mode: mode,
      theme: theme,
      openKeys: this.openKeys
    }
    const on = {
      select: obj => {
        this.selectedKeys = obj.selectedKeys
        this.$emit('select', obj)
      },
      openChange: this.onOpenChange
    }

    const menuTree = menu.map(item => {
      if (item.hidden) {
        return null
      }
      return this.renderItem(item)
    })
    // {...{ props, on: on }}
    return (
      <Menu vModel={this.selectedKeys} {...{ props, on: on }}>
        {menuTree}
      </Menu>
    )
    }
  }

至此自动生成一级菜单，或者二三级菜单

点击这里可能动态菜单不切换，留给大家研究，这些代码还有很多可以优化的地方，如有异议请包涵或评论区提出来供大家参考！