如何给侧边栏添加 Badge 计数标记

一、需求功能

给侧边菜单栏或及子菜单栏添加计数标记 el-badge

效果如下：

二、实现思路 

• 结合 icon 图标渲染的思路，通过在layout 的 item.vue 中使用 vnodes.push 方法实现对 <el-badge /> 的渲染。
• 在通过 Vuex 的状态管理将菜单栏需要的数据转递过来
• 过滤不需要的菜单栏

layout目录结构

三、 具体实现步骤

1.渲染 <el-badge /> ：src\layout\components\Sidebar\Item.vue

<script>
export default {name: 'MenuItem',functional: true,props: {icon: {type: String,default: ''},title: {type: String,default: ''},num: {type: Number,default: 5}},render(h, context) {const { icon, title,num } = context.propsconst vnodes = []if (icon) {vnodes.push(<svg-icon icon-class={icon}/>)}if (title) {if (title === '生产物资审批') {if (title.length > 5) {vnodes.push(<span slot='title' title={(title)}>{(title)}<el-badge value={(num)} class="item" id="elBadge" /></span>)} else {vnodes.push(<span slot='title'>{(title)}<el-badge value={(num)}  id="elBadge"/></span>)}}else{if (title.length > 5) {vnodes.push(<span slot='title' title={(title)}>{(title)}</span>)} else {vnodes.push(<span slot='title'>{(title)}</span>)}}}return vnodes}
}
</script>
<style>.item {margin-top: -20px;margin-right: 10px;}
</style>

2.num值由父页面传递

3.获取num方式：从缓存获取

4.在登录页面将mun值存入缓存中

登录页面：src\store\modules\user.js(这个根据项目结构来看)

localStorage.setItem("approve_num", response.total)

 5.当num数量动态减少时，侧边栏的数组需要跟着变化，可以用以下方法实现

//给红色提示赋值--startlocalStorage.setItem("approve_num", response.total)const elx = document.getElementById("elBadge").getElementsByClassName("el-badge__content el-badge__content--undefined")[0]elx.innerHTML = response.total//给红色提示赋值--end