Xf-association/src/backstage/NavMenu.vue

<template>
  <div id="main_left" :class="!$store.state.navStatus ? 'small_main_left' : ''">
    <el-menu
      :collapse-transition="false"
      :default-active="$route.path"
      @open="handleOpen"
      @close="handleClose"
      :collapse="!$store.state.navStatus"
      router
    >
      <template v-for="menu in backstageAsyncRouter">
        <Menu
          v-if="menu.menuType == 1 && menu.children.length > 0 && menu.visible == 1 && menu.status == 1"
          :key="menu.parentid + '-' + menu.systemfunctionid"
          :menu="menu"
        ></Menu>
        <el-menu-item v-if="menu.menuType == 2 && menu.visible == 1 && menu.status == 1" :index="menu.path">
          <i :class="menu.meta.icon"></i>
          <span slot="title">{{ menu.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import Menu from "./menu.vue";
import { mapGetters } from "vuex";
export default {
  components: { Menu },
  data() {
    return {};
  },
  computed: { ...mapGetters(["backstageAsyncRouter"]) },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(this.$route);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  width: 3px !important;
}
#main_left {
  flex-shrink: 0;
  overflow: auto;
  width: 210px;
  border-right: 1px solid #e6e6e6;
  transition: all 0.2s;
}
::v-deep .el-menu {
  border-right: none;
}
.small_main_left {
  width: 65px !important;
}
</style>