解决多层菜单问题

src/app-register.ts

@@ -78,6 +78,7 @@ import AppOrgSelect from './components/app-org-select/app-org-select.vue'
 import AppDepartmentSelect from './components/app-department-select/app-department-select.vue'
 import AppGroupSelect from './components/app-group-select/app-group-select.vue'
 import UpdatePwd from './components/app-update-password/app-update-password.vue'
+import AppMenuItem from './components/app-menu-item/app-menu-item.vue'
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -168,5 +169,6 @@ export const AppComponents = {
         v.component('app-transfer',AppTransfer);
         v.component('context-menu-drag',ContextMenuDrag);
         v.component('app-update-password',UpdatePwd);
+        v.component('app-menu-item', AppMenuItem);
     },
 };
\ No newline at end of file

src/components/app-menu-item/app-menu-item.vue

+<template>
+    <div class="app-menu-item">
+        <template v-for="item in menus">
+             <template v-if="item.items && Array.isArray(item.items) && item.items.length > 0">
+                <el-submenu v-show="!item.hidden" :index="item.name" :popper-class="popperClass" :key="item.id">
+                    <template slot='title'>
+                        <template v-if="item.icon && item.icon != ''">
+                            <img :src="item.icon" class='app-menu-icon' />
+                        </template>
+                        <template v-else-if="item.iconcls && item.iconcls != ''">
+                            <i :class="[item.iconcls, 'app-menu-icon']"></i>
+                        </template>
+                        <template v-else>
+                            <i class='fa fa-cogs app-menu-icon'></i>
+                        </template>
+                        <span class='text' :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
+                    </template>
+                    <app-menu-item :menus="item.items" :ctrlName="ctrlName" :counterdata="counterdata" :popperclass="popperClass"></app-menu-item>
+                </el-submenu>
+             </template>
+             <template v-else>
+                <template v-if="item.type =='MENUITEM'">
+                    <el-menu-item v-show="!item.hidden" :index="item.name" :key="item.id">
+                        <template v-if="item.icon && item.icon != ''">
+                            <img :src="item.icon" class='app-menu-icon' />
+                        </template>
+                        <template v-else-if="item.iconcls && item.iconcls != ''">
+                            <i :class="[item.iconcls, 'app-menu-icon']"></i>
+                        </template>
+                        <template v-else>
+                            <i class='fa fa-cogs app-menu-icon'></i>
+                        </template>
+                        <template slot="title">
+                            <span class="text" :title="$t(`app.menus.${ctrlName}.${item.name}`)">{{$t(`app.menus.${ctrlName}.${item.name}`)}}</span>
+                            <template v-if="counterdata && counterdata[item.counterid] && counterdata[item.counterid] > 0">
+                                <span class="pull-right">
+                                    <badge :count="counterdata[item.counterid]" :overflow-count="9999"></badge>
+                                </span>
+                            </template>
+                        </template>
+                    </el-menu-item>
+                </template>
+                <template v-if="item.type =='SEPERATOR'">
+                        <divider :key="item.id" />
+                </template>
+            </template>
+        </template>
+   </div>     
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component({})
+export default class AppMenuItem extends Vue {
+    
+    /**
+     * 菜单数据
+     * 
+     * @type {*}
+     * @memberof AppMenuItem
+     */
+    @Prop( {default: []} ) public menus!: any;
+
+    /**
+     * 部件名称
+     * 
+     * @type {*}
+     * @memberof AppMenuItem
+     */
+    @Prop() public ctrlName!: string;
+
+    /**
+     * 计数器数据
+     * 
+     * @type {*}
+     * @memberof AppMenuItem
+     */
+    @Prop() public counterdata!: any;
+
+    /**
+     * 提示框主题样式
+     * 
+     * @type {*}
+     * @memberof AppMenuItem
+     */
+    @Prop() public popperClass!: any;
+
+
+}
+</script>
\ No newline at end of file