vpp/src/views/xtpzyrz/LeftNav.vue

<template>
    <div class="sidebar">
        <div style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;">
            <span style="position: absolute;top:-3px;left: 70px;color: #fff;">目录</span>
        </div>
        <div style="height: 40px"></div>
        <el-menu
                :default-openeds="['/1']"
                active-text-color="#ffd04b"
                background-color="transparent"
                class="sidebar-el-menu"
                text-color="#fff"
                @select="selectMenu">
            <!-- 一级菜单 -->
            <template v-for="item in list">
                <el-submenu v-if="item.children && item.children.length" :id="item.path" :key="item.path"
                            :index="item.path">
                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 8px;"
                                                width="28px"/><span style="font-size:18px;font-weight:bold"><div
                            class="d1">{{ item.name }}</div></span>
                    </template>
                    <!-- 二级菜单 -->
                    <template v-for="itemChild in item.children">
                        <el-submenu v-if="itemChild.children && itemChild.children.length" :id="itemChild.path"
                                    :key="itemChild.path"
                                    :index="itemChild.path">
                            <template slot="title"><img :src="require('../fdjh/img/pc1.png')"
                                                        style="margin-right: 8px;"/><span
                                    style="font-size:16px;font-weight:bold">{{ itemChild.name }}</span></template>
                            <!-- 三级菜单 -->
                            <el-menu-item v-for="itemChild_Child in itemChild.children" :id="itemChild_Child.path"
                                          :key="itemChild_Child.path"
                                          :index="itemChild_Child.path">
                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 8px;"/><span
                                    slot="title"><div class="d1">{{ itemChild_Child.name }}</div></span></el-menu-item>
                        </el-submenu>

                        <el-menu-item v-else :id="itemChild.path" :key="itemChild.path" :index="itemChild.path"><img
                                :src="require('../fdjh/img/pc1.png')"
                                style="margin-right: 8px;"/><span slot="title">{{ itemChild.name }}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item v-else :id="item.path" :key="item.path" :index="item.path"><img
                        :src="require('../fdjh/img/plan.png')" style="margin-right: 8px;"
                        width="28px"/><span
                        slot="title">{{ item.name }}</span></el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                {
                    path: "/1",
                    name: "系统配置与日志",
                    children: [
                        {
                            path: "/1/1",
                            name: "系统日志",
                            children: [
                                {
                                    path: "/#/jkcx",
                                    name: "接口、程序",
                                }
                            ]
                        },
                        {
                            path: "/1/2",
                            name: "系统配置",
                            children: [
                                {
                                    path: "/#/pzb",
                                    name: "配置表",
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        selectMenu(key, keyPath, node) {
            // 右侧区域显示页面
            var parentIframe = parent.document.getElementById('showcontent');
            parentIframe.src = key;

            // 1、2级菜单设置
            for (var i = 0; i < document.getElementsByClassName('el-submenu').length; i++) {
                if (node.$parent.$attrs.id == document.getElementsByClassName('el-submenu')[i].id) {
                    document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('../fdjh/img/pc.png');
                    document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
                } else {
                    if (document.getElementsByClassName('el-submenu')[i].id != '/1') {
                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('img')[0].src = require('../fdjh/img/pc1.png');
                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
                    }
                    if (document.getElementsByClassName('el-submenu')[i].id == '/1') {
                        // root根设置背景图
                        document.getElementById(document.getElementsByClassName('el-submenu')[i].id).getElementsByTagName('span')[0].className = "rootbg";
                    }
                }
            }

            // 3级菜单设置
            for (var i = 0; i < document.getElementsByClassName('el-menu-item').length; i++) {
                if (document.getElementsByClassName('el-menu-item')[i].id == key) {
                    document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('../fdjh/img/last.png');
                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "test";
                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'color:rgb(227,220,10);font-size:16px;font-weight:bold';
                } else {
                    document.getElementsByClassName('el-menu-item')[i].getElementsByTagName('img')[0].src = require('../fdjh/img/last1.png');
                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].className = "";
                    document.getElementById(document.getElementsByClassName('el-menu-item')[i].id).getElementsByTagName('span')[0].style = 'font-size:16px;font-weight:bold';
                }
            }
        },

    }
}
</script>

<style scoped>
.d1 {
    padding-left: 8px;
    height: 38px;
    width: 90%;
    display: inline-block;
    line-height: 38px;
}

.test {
    background: url(../fdjh/img/node_bg.png) no-repeat;
//padding-left: 8px; height: 38px; width: 90%; display: inline-block; line-height: 38px;
}

.rootbg {
    background: url(../fdjh/img/root_bg.png) no-repeat;
//padding-left: 8px; height: 38px; width: 90%; display: inline-block; line-height: 38px;
}

.sidebar {
    display: block;
    text-align: left;

}

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

.sidebar-el-menu:not(.el-menu--collapse) {
    margin: 0px 0 30px 30px;
    background-size: 100% 100%;
    height: 90%;
}

/deep/ .el-submenu__title:hover {
    background-color: rgb(103, 118, 49) !important;
}

/deep/ .sidebar-el-menu {
    margin-left: 23px !important;
}

.sidebar > ul {
    height: 100%;
}

.el-menu {
    border: 0 !important;
}

.el-menu-item {
    height: 40px;
    font-size: 16px;
    font-weight: bold;
}

.el-submenu .el-menu-item:hover {
    background-color: rgb(103, 118, 49) !important;
}

.el-sub-menu__title:hover {
    background-color: rgb(103, 118, 49) !important;
}
</style>