Nav_20190319173158.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <template>
  2. <div class="nav">
  3. <!-- <el-button v-if="!isCollapse" icon="el-icon-arrow-left" circle @click="open"></el-button> -->
  4. <!-- <el-button v-if="isCollapse" icon="el-icon-arrow-right" circle @click="open"></el-button> -->
  5. <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  6. <el-radio-button :label="false">展开</el-radio-button>
  7. <el-radio-button :label="true">收起</el-radio-button>
  8. </el-radio-group> -->
  9. <el-menu
  10. default-active="1-4-1"
  11. :collapse="isCollapse"
  12. class="el-menu-vertical-demo"
  13. background-color="#545c64"
  14. text-color="#fff"
  15. active-text-color="#ffd04b"
  16. :router="true"
  17. @select="handleSelect"
  18. >
  19. <el-menu-item index="/manage/query">
  20. <i class="el-icon-search"></i>
  21. <span slot="title">经营数据查询</span>
  22. </el-menu-item>
  23. <el-menu-item index="/manage/cost">
  24. <i style="font-style:normal">成本</i>
  25. <span slot="title">经营数据成本</span>
  26. </el-menu-item>
  27. <el-menu-item index="/manage/index">
  28. <i style="font-style:normal">收入</i>
  29. <span slot="title">经营数据收入</span>
  30. </el-menu-item>
  31. <el-menu-item index="/team/index">
  32. <i style="font-style:normal">部门</i>
  33. <span slot="title">部门管理</span>
  34. </el-menu-item>
  35. <el-menu-item index="/project/index">
  36. <i style="font-style:normal">项目</i>
  37. <span slot="title">项目管理</span>
  38. </el-menu-item>
  39. <el-menu-item index="/product/index">
  40. <i style="font-style:normal">产品</i>
  41. <span slot="title">产品管理</span>
  42. </el-menu-item>
  43. <el-menu-item index="/costType/index">
  44. <i style="font-style:normal">类型</i>
  45. <span slot="title">成本类型管理</span>
  46. </el-menu-item>
  47. <!--
  48. <el-menu-item index="/costTeam/index">
  49. <span slot="title">成本部门/单位/人管理</span>
  50. </el-menu-item>
  51. -->
  52. </el-menu>
  53. </div>
  54. </template>
  55. <script>
  56. export default {
  57. data() {
  58. return {
  59. isCollapse: true
  60. };
  61. },
  62. methods: {
  63. open() {
  64. this.isCollapse = !this.isCollapse;
  65. },
  66. handleSelect(key, keyPath) {
  67. console.log(key, keyPath);
  68. switch(key){
  69. case '/manage/query':
  70. Vue.prototype.$navTitle = '经营数据查询'
  71. break;
  72. }
  73. }
  74. }
  75. };
  76. </script>
  77. <style>
  78. .nav {
  79. transition: width 0.28s;
  80. width: 180px !important;
  81. height: 100%;
  82. position: fixed;
  83. font-size: 0px;
  84. top: 0;
  85. bottom: 0;
  86. left: 0;
  87. z-index: 1001;
  88. overflow: hidden;
  89. }
  90. .el-menu {
  91. height: 100%;
  92. }
  93. </style>