vpp/src/views/ssdd/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
                active-text-color="#ffd04b"
                background-color="transparent"
                class="sidebar-el-menu"
                default-active="1"
                text-color="#fff">
            <!-- 一级菜单 -->
            <template v-for="item in list">
                <el-submenu v-if="item.children && item.children.length" :key="item.path" :index="item.path">
                    <template slot="title"><img :src="require('../fdjh/img/plan.png')" style="margin-right: 10px;"
                                                width="28px"/><span style="font-size:18px;font-weight:bold">{{
                        item.name
                        }}</span>
                    </template>
                    <!-- 二级菜单 -->
                    <template v-for="itemChild in item.children">
                        <el-submenu v-if="itemChild.children && itemChild.children.length" :key="itemChild.path"
                                    :index="itemChild.path">
                            <template slot="title"><img :src="require('../fdjh/img/pc1.png')"
                                                        style="margin-right: 10px;"/><span
                                    style="font-size:16px;font-weight:bold">{{ itemChild.name }}</span></template>
                            <!-- 三级菜单 -->
                            <el-menu-item v-for="itemChild_Child in itemChild.children" :key="itemChild_Child.path"
                                          :index="itemChild_Child.path" @click="changePage(itemChild_Child)">
                                <img :src="require('../fdjh/img/last1.png')" style="margin-right: 10px;"/><span
                                    slot="title">{{ itemChild_Child.name }}</span></el-menu-item>
                        </el-submenu>

                        <el-menu-item v-else :key="itemChild.path" :index="itemChild.path"><img
                                :src="require('../fdjh/img/pc1.png')"
                                style="margin-right: 10px;"/><span slot="title">{{ itemChild.name }}</span>
                        </el-menu-item>
                    </template>
                </el-submenu>
                <el-menu-item v-else :key="item.path" :index="item.path"><img :src="require('../fdjh/img/plan.png')"
                                                                              style="margin-right: 10px;"
                                                                              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: "/#/table1",
                                    name: "风电",
                                },
                                {
                                    path: "/#/fdjhgf",
                                    name: "光伏电站",
                                },
                                {
                                    path: "/#/fdjhhd",
                                    name: "火电厂",
                                },
                                {
                                    path: "/#/fdjhcn",
                                    name: "储能",
                                }
                            ]
                        },
                        {
                            path: "/1/2",
                            name: "约束条件监控",
                            children: [
                                {
                                    path: "/#/llx",
                                    name: "联络线",
                                },
                                {
                                    path: "/#/dm",
                                    name: "断面",
                                }
                            ]
                        },
                        {
                            path: "/1/3",
                            name: "数据采集监控监控",
                            children: [
                                {
                                    path: "/#/hd",
                                    name: "火电厂",
                                },
                                {
                                    path: "/#/fdgf",
                                    name: "风电、光伏电站",
                                },
                                {
                                    path: "/#/ptfh",
                                    name: "普通负荷",
                                },
                                {
                                    path: "/#/gaoznfh",
                                    name: "高载能负荷",
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    methods: {
        changePage(obj) {
            var parentIframe = parent.document.getElementById('showcontent');
            parentIframe.src = obj.path;
        }

    }
}
</script>

<style scoped>
.sidebar {
    display: block;
    text-align: left;

}

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

.sidebar-el-menu:not(.el-menu--collapse) {
//position: absolute; //top: 6%; 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>