lotteryDraw_admin/src/components/super/RankingLeft.vue

<template>
    <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @select="handleSelect" :collapse="isCollapse" :default-openeds="defaultOpeneds">
        <div class="menu-top">
            <span v-show="!isCollapse">导航</span>
            <img v-if="!isCollapse" src="../../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
            <img v-else src="../../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
        </div>
        <el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
            <template slot="title">
                <i :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>
            <el-menu-item style="padding: 0 22px;" v-for="subItem in item.children" :key="subItem.index" :index="subItem.index">
                {{ subItem.title }}
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>
<script>
export default {
    name: 'RankingLeft',
    data() {
        return {
            isCollapse: false,
            activeMenu: '',
            defaultOpeneds: [], // <-- 添加这个变量
            routerList: [],
            menuData: [
                {
                    index: '1',
                    title: '总利润',
                    icon: 'el-icon-menu',
                    children: [
                        { index: '1-1', title: '年排行', path: '/super/ranking/yearProfit' },
                        { index: '1-2', title: '月排行', path: '/super/ranking/monthProfit' }
                    ]
                },
                {
                    index: '2',
                    title: '产品',
                    icon: 'el-icon-menu',
                    children: [
                        { index: '2-1', title: '毛利润排行', path: '/super/ranking/checkProfit' },
                        { index: '2-2', title: '订单数排行', path: '/super/ranking/checkOrdernum' },
                        { index: '2-3', title: '退单数排行', path: '/super/ranking/checkRefund' },
                        { index: '2-4', title: '负毛利排行', path: '/super/ranking/loss' }
                    ]
                },
                {
                    index: '3',
                    title: '代理商',
                    icon: 'el-icon-menu',
                    children: [
                        { index: '3-1', title: '毛利润排行', path: '/super/ranking/agentProfit' },
                        { index: '3-2', title: '充值排行', path: '/super/ranking/agentRecharge' },
                        { index: '3-3', title: '新加盟', path: '/super/ranking/agentNew' }
                    ]
                },
                {
                    index: '4',
                    title: '设置',
                    icon: 'el-icon-menu',
                    children: [
                        { index: '4-1', title: '采购价', path: '/super/ranking/purchase' },
                        { index: '4-2', title: '阶段采购', path: '/super/ranking/stagePurchase' }
                    ]
                }
            ]
        };
    },
    methods: {
        changeMenuStatus(flag) {
            this.isCollapse = flag;
        },
        handleSelect(index) {
            this.activeMenu = index;

            // 找到被点击的 menu 项对应的 path
            const allItems = this.menuData.flatMap(menu => menu.children);
            const targetItem = allItems.find(item => item.index === index);

            if (targetItem && this.$route.path !== targetItem.path) {
                this.$router.push(targetItem.path);
            }
        },
    },
    mounted() {
        const allItems = this.menuData.flatMap(menu => menu.children.map(child => ({ ...child, parentIndex: menu.index })));
        const current = allItems.find(item => item.path === this.$route.path);
        this.activeMenu = current ? current.index : '';
        this.defaultOpeneds = current ? [current.parentIndex] : [];
    }
}
</script>
<style lang="scss" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 158px;
  min-width: 158px;
  min-height: calc(100vh - 62px);
}

.el-menu-item {
  padding: 0 22px;
}

.menu-top {
  background: #FFFFFF;
  box-sizing: border-box;
  /* middle/middle_line_1 */
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #DFE2E6;
  padding: 15px 0px;
  margin: 0 22px;
  display: flex;
  font-size: 16px;
  color: #1E2226;
  font-weight: bold;
  line-height: normal;
  letter-spacing: 0.08em;
  justify-content: space-between;
  align-items: center;
}

::v-deep .el-submenu {
  width: 16px;
  font-size: 16px;
}

::v-deep .el-submenu .el-menu-item {
  min-width: 138px;
  width: 100%;
}

::v-deep .el-submenu__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

::v-deep .el-submenu__title:hover {
  background-color: transparent;
  cursor: not-allowed;
}

::v-deep .el-submenu__title .el-submenu__icon-arrow.el-icon-arrow-down {
  display: none;
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 22px;
  display: flex;
  justify-content: flex-start;
}

::v-deep .el-submenu .el-menu-item {
  height: 36px;
}

::v-deep.el-submenu .el-menu-item {
  height: 36px;
  line-height: 36px;
  color: #8A9099;
  letter-spacing: 0.08em;
}

::v-deep .el-menu-item:hover {
  background: #F6F7FA;
}

::v-deep .el-menu-item.is-active {
  color: #006AFF;
  font-weight: bold;
}
</style>