Эх сурвалжийг харах

fix(web): 修复动态菜单子菜单名称为空、无子菜单的一级菜单展开箭头问题

- buildMenuItems: n.name → n.title/n.label(数据库字段名不匹配导致名称丢失)
- 模板: el-submenu 增加 children.length > 0 条件(无子节点时不渲染展开箭头)
- key/index: 补充 id 兜底,避免 path 为空时的渲染异常
Sisyphus 2 сар өмнө
parent
commit
6712142aa8

+ 12 - 11
cfc-web/src/views/Layout.vue

@@ -14,21 +14,21 @@
           @select="handleMenuSelect"
         >
 <template v-for="item in effectiveMenuItems">
-            <el-submenu v-if="item.children && hasPerm(item.perm)" :key="item.title || item.path" :index="item.title || item.path">
+            <el-submenu v-if="item.children && item.children.length > 0 && hasPerm(item.perm)" :key="item.title || item.path" :index="item.title || item.path">
               <template slot="title">
                 <i :class="item.icon"></i>
-                <span>{{ item.label || item.title }}</span>
+                <span>{{ item.title || item.label }}</span>
               </template>
               <template v-for="child in item.children">
                 <!-- 子项有 children = 三级菜单 -->
-                <el-submenu v-if="child.children && hasPerm(child.perm)" :key="child.title" :index="child.title">
+                <el-submenu v-if="child.children && child.children.length > 0 && hasPerm(child.perm)" :key="child.title" :index="child.title">
                   <template slot="title">
                     <i :class="child.icon"></i>
-                    <span>{{ child.title }}</span>
+                    <span>{{ child.title || child.label }}</span>
                   </template>
                   <el-menu-item
                     v-for="grandson in child.children"
-                    :key="grandson.path"
+                    :key="grandson.path || grandson.id"
                     :index="grandson.path"
                   >
                     <i :class="grandson.icon"></i>
@@ -36,13 +36,13 @@
                   </el-menu-item>
                 </el-submenu>
                 <!-- 普通二级菜单项 -->
-                <el-menu-item v-else-if="hasPerm(child.perm)" :key="child.path" :index="child.path">
+                <el-menu-item v-else-if="hasPerm(child.perm)" :key="child.path || child.id" :index="getMenuIndex(child)">
                   <i :class="child.icon"></i>
                   <span slot="title">{{ child.label }}</span>
                 </el-menu-item>
               </template>
             </el-submenu>
-            <el-menu-item v-else-if="hasPerm(item.perm)" :key="item.path" :index="getMenuIndex(item)">
+            <el-menu-item v-else-if="hasPerm(item.perm)" :key="item.path || item.id" :index="getMenuIndex(item)">
               <i :class="item.icon"></i>
               <span slot="title">{{ item.label }}</span>
             </el-menu-item>
@@ -498,12 +498,13 @@ export default {
         var item = {}
         if (n.path) {
           item.path = n.path
-          item.label = n.name
-          item.icon = n.icon || 'el-icon-menu'
+          item.label = n.label || n.title || ''
+          item.icon = n.icon || ''
           item.perm = n.perm || ''
         } else {
-          item.title = n.name
-          item.icon = n.icon || 'el-icon-menu'
+          item.title = n.title || ''
+          item.label = n.label || ''
+          item.icon = n.icon || ''
           item.perm = n.perm || ''
         }
         if (n.children && n.children.length > 0) {