diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
index 03e3b89fdb0fbae76eb3ffdc8612c7c84a357eb9..a19a4288d5766a26b11a4965a1bfc54193daf7e8 100644
--- a/src/views/layout/components/Sidebar/Item.vue
+++ b/src/views/layout/components/Sidebar/Item.vue
@@ -1,7 +1,14 @@
+<template>
+  <span>
+    <svg-icon :icon-class="icon"/>
+    <span slot="title">{{ title }}</span>
+    <el-badge :value="count" type="primary" class="count-badge" />
+  </span>
+</template>
+
 <script>
 export default {
-  name: 'MenuItem',
-  functional: true,
+  name: 'Item',
   props: {
     count: {
       type: String,
@@ -15,23 +22,13 @@ export default {
       type: String,
       default: ''
     }
-  },
-  render(h, context) {
-    const { count, icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)} </span>)
-    }
-
-    if (count) {
-      vnodes.push(<span slot='title'>({(count)})</span>)
-    }
-    return vnodes
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.count-badge {
+  margin-left: 5px;
+  height: 48px;
+}
+</style>