efun-finance/.history/src/pages/layout/nav/Nav_20190319173158.vue

<template>
  <div class="nav">
    <!-- <el-button v-if="!isCollapse" icon="el-icon-arrow-left" circle @click="open"></el-button> -->
    <!-- <el-button v-if="isCollapse" icon="el-icon-arrow-right" circle @click="open"></el-button> -->
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
    <el-menu
      default-active="1-4-1"
      :collapse="isCollapse"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :router="true"
      @select="handleSelect"
    >
      <el-menu-item index="/manage/query">
        <i class="el-icon-search"></i>
        <span slot="title">经营数据查询</span>
      </el-menu-item>

      <el-menu-item index="/manage/cost">
        <i style="font-style:normal">成本</i>
        <span slot="title">经营数据成本</span>
      </el-menu-item>
      <el-menu-item index="/manage/index">
        <i style="font-style:normal">收入</i>
        <span slot="title">经营数据收入</span>
      </el-menu-item>
      <el-menu-item index="/team/index">
        <i style="font-style:normal">部门</i>
        <span slot="title">部门管理</span>
      </el-menu-item>
      <el-menu-item index="/project/index">
        <i style="font-style:normal">项目</i>
        <span slot="title">项目管理</span>
      </el-menu-item>
      <el-menu-item index="/product/index">
        <i style="font-style:normal">产品</i>
        <span slot="title">产品管理</span>
      </el-menu-item>
      <el-menu-item index="/costType/index">
        <i style="font-style:normal">类型</i>
        <span slot="title">成本类型管理</span>
      </el-menu-item>
      <!--
        <el-menu-item index="/costTeam/index">
            <span slot="title">成本部门/单位/人管理</span>
        </el-menu-item>
      -->
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapse: true
    };
  },
  methods: {
    open() {
      this.isCollapse = !this.isCollapse;
    },
    handleSelect(key, keyPath) {
        console.log(key, keyPath);
        switch(key){
            case '/manage/query':
                Vue.prototype.$navTitle = '经营数据查询'
            break;
        }
    }
  }
};
</script>
<style>
.nav {
  transition: width 0.28s;
  width: 180px !important;
  height: 100%;
  position: fixed;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}
.el-menu {
  height: 100%;
}
</style>