Vue点击子菜单，父菜单高亮显示，图标切换

 

 完整版

<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="activeMenu" text-color="#36BFF3" active-text-color="#fff"
            unique-opened router @select="selectmenu">
            <!-- 一级菜单 -->
            <template v-for="(item,index) in menus">
                <el-menu-item v-if="!item.children" :key="index" :index="item.path" :id="item.path">
                    <img :src="item.path === $route.path ? item.Aicon : item.icon">
                    <span class="span4" slot="title">{{item.name}}</span>
                </el-menu-item>
                <!-- 多级菜单 -->
                <el-submenu v-else :key="index" :index="item.icon" :id="item.path">
                    <template slot="title">
                        <img :src="chooseIcon(item, $route.path)">
                        <span class="span4" slot="title">{{item.name}} </span>
                    </template>
                    <template v-for="(etem, index) in item.children">
                        <el-menu-item :index="etem.path" :key="index">
                            {{etem.name}}
                        </el-menu-item>
                    </template>
                </el-submenu>
            </template>
        </el-menu>
    </div>
</template>

<script>
    // import bus from '../common/bus';
    export default {
        data() {
            return {
                activeMenu: '/archivesInfor',
                menus: [{
                        name: '档案管理',
                        icon: require('../../assets/imgs/dagl.png'), // 未高亮图标
                        Aicon: require('../../assets/imgs/icon_dagl.png'), // 高亮图标

                        children: [{
                                name: '档案信息',
                                path: '/archivesInfor'
                            },
                            {
                                name: '档案借阅',
                                path: '/ArchivesBorrowing'
                            },
                            {
                                name: '在借档案',
                                path: '/BorrowedArchives'
                            },
                            {
                                name: '丢失档案',
                                path: '/LossArchives'
                            },
                            {
                                name: '档案回收站',
                                path: '/ArchivesRecovery'
                            },
                        ]
                    },
                    {
                        name: '档案盘点',
                        icon: require('../../assets/imgs/dapd.png'), // 未高亮图标
                        Aicon: require('../../assets/imgs/icon_dapd.png'), // 高亮图标
                        children: [{
                                name: '盘点计划',
                                path: '/InventoryPlan'
                            },
                            {
                                name: '盘点任务',
                                path: '/InventoryTask'
                            },
                            {
                                name: '外借人员管理',
                                path: '/ManagementLoanPer'
                            },

                        ]
                    },
                    {
                        name: '基础配置',
                        icon: require('../../assets/imgs/jcpz.png'), // 未高亮图标
                        Aicon: require('../../assets/imgs/icon_jcpz.png'), // 高亮图标
                        children: [{
                                name: '介质类型',
                                path: '/MediaType'
                            },
                            {
                                name: '保密级别',
                                path: '/SecurityLevel'
                            },
                            {
                                name: '档案分类',
                                path: '/ArchivesType'
                            },

                        ]
                    },
                    {
                        name: '档案盒管理',
                        icon: require('../../assets/imgs/dahg.png'), // 未高亮图标
                        Aicon: require('../../assets/imgs/icon_dahg.png'), // 高亮图标
                        children: [{
                                name: '档案盒新增',
                                path: '/ArchivesBoxAdd'
                            },
                            {
                                name: '档案盒信息',
                                path: '/ArchivesBoxEdit'
                            },
                        ]
                    },
                    {
                        name: '历史信息查询',
                        icon: require('../../assets/imgs/icon_ls.png'), // 未高亮图标
                        Aicon: require('../../assets/imgs/lixx.png'), // 高亮图标
                        children: [{
                                name: '档案操作记录',
                                path: '/ArchivesOperRecord'
                            },
                            {
                                name: '历史盘点任务',
                                path: '/HistoryInventory'
                            },
                            {
                                name: '门口机消息记录',
                                path: '/DoorNewsRecord'
                            },
                        ]
                    },
                    {
                        name: '统计分析',
                        icon: require('../../assets/imgs/tjfx.png'), // 未高亮图标
                        Aicon: require('../../assets/imgs/icon_tjfx.png'), // 高亮图标
                        children: [{
                                name: '档案数量统计',
                                path: '/archNumberStatistics'
                            },
                            {
                                name: '档案借阅统计',
                                path: '/archBorrowingStatistics'
                            },
                            {
                                name: '档案操作统计',
                                path: '/archOperationStatistics'
                            },

                        ]
                    },
                ]
            };
        },

        methods: {
            selectmenu(index, indexPath) {
                this.activeMenu = index
            },
            chooseIcon(item, route) {
                let n = 0 // 用于判断当前一级菜单下的二级菜单是否被点击
                for (let i = 0; i < item.children.length; i++) {
                    if (item.children[i].path == route) {
                        n = 1
                    }
                }
                if (n == 1) { // 被点击了，返回高亮图标
                    return item.Aicon
                } else { // 未被点击，返回未高亮图标
                    return item.icon

                }
            },
        }
    };
</script>

<style scoped>
    .sidebar {
        display: block;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 220px;
        height: 912px;
        margin: 0 0 30px 30px;
        background: url(../../assets/imgs/tabk.png) no-repeat;
        background-size: 100% 100%;
    }

    .sidebar>ul {
        height: 100%;
    }

    >>>.el-submenu__title {
        height: 80px;
    }

    >>>.el-submenu__title>span {
        line-height: 80px;
        margin: 0 10px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
    }

    >>>.el-submenu__title>span::before {
        position: absolute;
        left: 20px;
        top: 80px;
        content: "";
        width: 180px;
        height: 1px;
        background: #36BEF2;
        opacity: 0.3;
    }

    >>>.el-submenu__icon-arrow {
        background: url(../../assets/imgs/tb-l-1.png);
    }

    >>>.el-submenu.is-active .el-submenu__title .el-submenu__icon-arrow {
        background: url(../../assets/imgs/tb-l-2.png);
    }

    >>>.el-menu-item {
        padding-left: 60px !important;
        line-height: 80px;
        height: 80px;
        font-size: 18px;
    }

    >>>.el-submenu.is-active .el-submenu__title .span4 {
        color: #fff;
    }

    >>>.sidebar-el-menu {
        padding-top: 18px
    }
</style>