Sidebar.vue 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <div class="sidebar">
  3. <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
  4. <template v-for="item in items">
  5. <template v-if="item.subs">
  6. <el-submenu :index="item.index">
  7. <template slot="title">
  8. <i :class="item.icon"></i>{{ item.title }}</template>
  9. <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
  10. </el-menu-item>
  11. </el-submenu>
  12. </template>
  13. <template v-else>
  14. <el-menu-item :index="item.index">
  15. <i :class="item.icon"></i>{{ item.title }}
  16. </el-menu-item>
  17. </template>
  18. </template>
  19. </el-menu>
  20. </div>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. items: []
  27. }
  28. },
  29. methods: {
  30. getKey: function(id) {
  31. return 'key_' + id
  32. }
  33. },
  34. computed: {
  35. onRoutes() {
  36. return this.$route.path.replace('/', '')
  37. }
  38. },
  39. mounted: function() {
  40. var items = []
  41. items.push({ icon: '', index: '/goodsManager', title: '商品管理'})
  42. items.push({ icon: '', index: '/sysLabelManager', title: '系统标签'})
  43. items.push({ icon: '', index: '/manageUser', title: '用户管理'})
  44. items.push({ icon: '', index: '/faqManage', title: '常见问题'})
  45. items.push({ icon: '', index: '/sysConfig', title: '系统配置'})
  46. items.push({ icon: '', index: '/bannerManage', title: 'Banner管理'})
  47. items.push({ icon: '', index: '/exchangeCodeDetail', title: '兑换码查询'})
  48. this.items = items
  49. for (var i in items){
  50. var item = items[i]
  51. if (item.index){
  52. this.$router.push(item.index)
  53. break;
  54. }else{
  55. if (item.subs){
  56. for (var j in item.subs){
  57. var c = item.subs[j]
  58. if (c.index){
  59. this.$router.push(inte.index)
  60. }
  61. }
  62. }
  63. }
  64. }
  65. }
  66. }
  67. </script>
  68. <style scoped>
  69. .sidebar {
  70. display: block;
  71. position: absolute;
  72. width: 250px;
  73. left: 0;
  74. top: 70px;
  75. bottom: 0;
  76. background: #2e363f;
  77. }
  78. .sidebar > ul {
  79. height: 100%;
  80. }
  81. </style>