jeecgboot侧边菜单栏添加角标

### 实现 JeecgBoot 侧边菜单栏添加 Badge 功能 #### 背景分析 JeecgBoot 是基于 Vue 和 Spring Boot 构建的企业级快速开发平台，其前端部分通常采用 Element UI 或 Ant Design Vue 进行界面构建。为了实现在 JeecgBoot 的侧边菜单栏上添加 Badge（角标）功能，可以借鉴 `vue-element-admin` 的实现方式[^1]以及动态渲染逻辑。 --- #### 技术方案概述 1. **数据传递**：通过 Vuex 或其他全局状态管理工具，将需要显示的 Badge 数据传递到侧边栏组件中。 2. **动态渲染**：在侧边栏菜单项的模板中引入 `<el-badge>` 组件，并根据条件判断是否渲染 Badge。 3. **实时更新**：如果需要动态更新 Badge 数量，可以通过监听路由变化或其他事件触发数据刷新。 --- #### 具体实现步骤 ##### 1. 修改 SideMenu 组件 找到 JeecgBoot 前端项目的侧边栏文件（通常是 `src/views/layout/components/SideMenu.vue`），修改其中的菜单渲染逻辑。 以下是改造后的代码示例： ```javascript <template> <div class="side-menu"> <el-menu :default-active="$route.path" router unique-opened> <template v-for="(menu, index) in menuList"> <!-- 子菜单 --> <el-submenu v-if="menu.children && menu.children.length > 0" :key="index" :index="menu.id"> <template slot="title"> <i :class="menu.icon"></i> <span>{{ menu.name }}</span> <el-badge v-if="menu.badgeCount !== undefined" :value="menu.badgeCount" /> </template> <el-menu-item-group> <el-menu-item v-for="(subMenu, subIndex) in menu.children" :key="subIndex" :index="subMenu.url"> {{ subMenu.name }} <el-badge v-if="subMenu.badgeCount !== undefined" :value="subMenu.badgeCount" /> </el-menu-item> </el-menu-item-group> </el-submenu> <!-- 单一菜单 --> <el-menu-item v-else :key="index" :index="menu.url"> <i :class="menu.icon"></i> <span>{{ menu.name }}</span> <el-badge v-if="menu.badgeCount !== undefined" :value="menu.badgeCount" /> </el-menu-item> </template> </el-menu> </div> </template> <script> export default { data() { return { menuList: [], // 菜单列表 }; }, created() { this.fetchMenus(); }, methods: { async fetchMenus() { try { const response = await this.$api.get('/sys/menu/nav'); // 获取菜单接口 this.menuList = this.formatMenus(response.data); } catch (error) { console.error('Failed to load menus:', error); } }, formatMenus(menus) { return menus.map(menu => ({ id: menu.id, name: menu.name, url: menu.url || '', icon: menu.icon || '', badgeCount: menu.badgeCount || null, // 添加 Badge Count 字段 children: menu.children ? this.formatMenus(menu.children) : [], })); }, }, }; </script> ``` 上述代码实现了以下功能： - 在父菜单和子菜单中分别支持 Badge 渲染。 - 使用 `badgeCount` 属性控制是否有 Badge 显示及其数值。 --- ##### 2. 后台返回带 Badge 数据 为了让前端能够正确渲染 Badge，后台需要在菜单数据中增加 `badgeCount` 字段。假设当前使用的 API 地址为 `/sys/menu/nav`，则返回的数据结构应类似于以下形式： ```json [ { "id": "1", "name": "首页", "url": "/dashboard", "icon": "el-icon-s-home" }, { "id": "2", "name": "订单管理", "url": "", "icon": "el-icon-document", "children": [ { "id": "2-1", "name": "待处理订单", "url": "/order/pending", "icon": "el-icon-tickets", "badgeCount": 5 // 待处理数量 }, { "id": "2-2", "name": "已完成订单", "url": "/order/completed", "icon": "el-icon-check", "badgeCount": 0 } ] } ] ``` --- ##### 3. 动态更新 Badge 数据 如果需要动态更新 Badge 数据，可以在路由守卫中调用相关接口并更新 Vuex 状态。例如，在 `router/index.js` 文件中加入以下逻辑： ```javascript import store from '@/store'; router.beforeEach(async (to, from, next) => { if (store.getters.token) { if (to.path === '/login') { next({ path: '/' }); } else { try { await store.dispatch('user/fetchBadgeData'); // 更新 Badge 数据 } catch (err) { console.error('Failed to update badge data:', err); } } } next(); }); ``` 此处假定存在一个 Vuex Action 名为 `fetchBadgeData`，用于从服务器拉取最新的 Badge 数据[^3]。 --- #### 注意事项 1. 确保后端返回的菜单数据包含 `badgeCount` 字段，且字段值为整数类型。 2. 如果使用的是 Ant Design Vue，则需替换 `<el-badge>` 为 `<a-badge>` 并调整属性名称[^2]。 3. 测试不同场景下的渲染效果，确保无样式错乱或性能问题。 --- ###