How to add Badge count mark to sidebar

1. Demand function

Add count mark el-badge to side menu bar or submenu bar

The effect is as follows:

2. Implementation ideas 

• Combined with the idea of ​​icon icon rendering, the right rendering is realized by using the vnodes.push method in the item.vue of the layout  <el-badge /> .
• Transfer the data required by the menu bar through the state management of Vuex
• Filter unwanted menu bars

layout directory structure

3. Concrete implementation steps

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.props
    const 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. The num value is passed by the parent page

3. How to get num: get from cache

4. Store the mun value in the cache on the login page

Login page: src\store\modules\user.js (this depends on the project structure)

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

 5. When the number of num is dynamically reduced, the array in the sidebar needs to change accordingly, which can be achieved by the following method

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