侧边栏菜单二级往后菜单重复显示

侧边栏菜单渲染后出现二级菜单三级菜单重复显示问题

img

img

  
          <template
            v-for="(item, index) in menuData[active]
              ? menuData[active].childMenu || []
              : []"
          >
            
            <template v-if="item.childMenu">
              <el-submenu :index="item.sysMenuCode" :key="item.sysMenuVueUrl">
                <template slot="title">
                  {{ item.sysMenuName }}
                template>
                
                <template v-for="subItem in item.childMenu || []">
                  
                  <template v-if="subItem.childMenu">
                    <el-submenu
                      :index="subItem.sysMenuCode"
                      :key="subItem.sysMenuVueUrl"
                    >
                      <template slot="title">
                        {{ subItem.sysMenuName }}
                      template>
                      
                      <template v-for="subItem2 in subItem.childMenu || []">
                        
                        <template v-if="subItem2.childMenu">
                          <el-submenu
                            :index="subItem2.sysMenuCode"
                            :key="subItem2.sysMenuVueUrl"
                          >
                            <template slot="title">
                              {{ subItem2.sysMenuName }}
                            template>
                            
                            <template
                              v-for="subItem3 in subItem2.childMenu || []"
                            >
                              
                              <template v-if="subItem3.childMenu">
                                <el-submenu
                                  :index="subItem3.sysMenuCode"
                                  :key="subItem3.sysMenuVueUrl"
                                >
                                  <template slot="title">
                                    {{ subItem3.sysMenuName }}
                                  template>
                                  <el-menu-item
                                    v-for="(
                                      fiveItem, i
                                    ) in subItem3.sysMenuName"
                                    :key="i"
                                    :index="fiveItem.sysMenuVueUrl"
                                    >{{ fiveItem.sysMenuName }}
                                el-submenu>
                              template>
                              
                              <el-menu-item
                                :index="subItem3.sysMenuVueUrl"
                                :key="subItem3.sysMenuVueUrl"
                                >{{ subItem3.sysMenuName }}
                            template>
                          el-submenu>
                        template>
                        
                        <el-menu-item
                          :index="subItem2.sysMenuVueUrl"
                          :key="subItem2.sysMenuVueUrl"
                          >{{ subItem2.sysMenuName }}
                      template>
                    el-submenu>
                  template>
                  
                  <el-menu-item
                    :index="subItem.sysMenuVueUrl"
                    :key="subItem.sysMenuVueUrl"
                    >{{ subItem.sysMenuName }}
                template>
              el-submenu>
            template>
            
            <template v-else>
              <el-menu-item
                :index="item.sysMenuVueUrl"
                :key="item.sysMenuVueUrl"
              >
                {{ item.sysMenuName }}
              el-menu-item>
            template>
          template>
        el-menu>
      el-aside>
<template v-if="subItem3.childMenu">  这个条件通过然后渲染了带下拉箭头的,然后你后面又来个<el-menu-item></el-menu-item>,
重复显示了,,,有 if 却没有设置else    后面的应该这么写   
<template v-if="!subItem3.childMenu">  <el-menu-item></el-menu-item></template>
```javascript


```

是vue-admin吗 如果是的话 没动这个组件,那就是路由的问题,可以先去路由配置里面排除一下

那你 对你的路由对象 去重