Nav_20190319171632.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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. >
  18. <el-menu-item index="/manage/query">
  19. <i class="el-icon-search"></i>
  20. <span slot="title">经营数据查询</span>
  21. </el-menu-item>
  22. <el-menu-item index="/manage/cost">
  23. <i style="font-style:normal">成本</i>
  24. <span slot="title">经营数据成本</span>
  25. </el-menu-item>
  26. <el-menu-item index="/manage/index">
  27. <i style="font-style:normal">收入</i>
  28. <span slot="title">经营数据收入</span>
  29. </el-menu-item>
  30. <el-menu-item index="/team/index">
  31. <i style="font-style:normal">部门</i>
  32. <span slot="title">部门管理</span>
  33. </el-menu-item>
  34. <el-menu-item index="/project/index">
  35. <i style="font-style:normal">项目</i>
  36. <span slot="title">项目管理</span>
  37. </el-menu-item>
  38. <el-menu-item index="/product/index">
  39. <i style="font-style:normal">产品</i>
  40. <span slot="title">产品管理</span>
  41. </el-menu-item>
  42. <el-menu-item index="/costType/index">
  43. <i style="font-style:normal">类型</i>
  44. <span slot="title">成本类型管理</span>
  45. </el-menu-item>
  46. <!--
  47. <el-menu-item index="/costTeam/index">
  48. <span slot="title">成本部门/单位/人管理</span>
  49. </el-menu-item>
  50. -->
  51. </el-menu>
  52. </div>
  53. </template>
  54. <script>
  55. export default {
  56. data() {
  57. return {
  58. isCollapse: true
  59. };
  60. },
  61. methods: {
  62. open() {
  63. this.isCollapse = !this.isCollapse;
  64. }
  65. }
  66. };
  67. </script>
  68. <style>
  69. .nav {
  70. transition: width 0.28s;
  71. width: 180px !important;
  72. height: 100%;
  73. position: fixed;
  74. font-size: 0px;
  75. top: 0;
  76. bottom: 0;
  77. left: 0;
  78. z-index: 1001;
  79. overflow: hidden;
  80. }
  81. .el-menu {
  82. height: 100%;
  83. }
  84. </style>