finance-cms/src/layout/layout-part/menus.vue

<template>
  <div id="menus">
    <el-menu :default-active="thisRouter()" class="el-menu-vertical-demo" :router="false" :default-openeds="defalutMenu" @select="to">
      <el-menu-item index="/"> <i class="el-icon-s-home"></i>首页 </el-menu-item>

      <el-submenu index="1">
        <template v-slot:title>
          <i class="el-icon-s-home"></i>
          <span>测试菜单</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/test/index">二级菜单</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="2">
      <template v-slot:title>
        <i class="el-icon-s-grid"></i>
        <span>企业需求</span>
      </template>
      <el-menu-item-group>
        <el-menu-item index="/businessneed/claim">债权需求</el-menu-item>
        <el-menu-item index="/businessneed/stock">股权需求</el-menu-item>
      </el-menu-item-group>
    </el-submenu>

      <el-submenu index="3">
        <template v-slot:title>
          <i class="el-icon-s-grid"></i>
          <span>授信管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/follow/followindex">授信债权需求</el-menu-item>
          <el-menu-item index="/follow/followstock">关注股权需求</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="4">
        <template v-slot:title>
          <i class="el-icon-s-grid"></i>
          <span>已完成</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/done/doneclaim">已完成债权需求</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

      <el-submenu index="5">
        <template v-slot:title>
          <i class="el-icon-s-grid"></i>
          <span>金融产品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/financeclaims/financeClaimIndex">债权产品管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'menus',
  props: {},
  components: {},
  data: () => ({
    // defalutMenu: ['1', '2', '3'],
    defalutMenu: [],
    defalutPage: '',
  }),
  created() {},
  computed: {},
  methods: {
    thisRouter() {
      console.log(this.$route.path);
    },
    to(index) {
      this.$router.push({ path: index });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-menu {
  border-right: none;
}
/deep/.el-menu-item,
.el-submenu__title {
  height: 45px;
  line-height: 45px;
}
/deep/.el-menu-item.is-active {
  color: #e9021d;
}
</style>