<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • template部分
    <el-menu default-active="PageHome" //默認打開的頁面path class="el-menu-demo"
    //添加class 便于設置樣式 mode="horizontal" //設置菜單為水平菜單 默認值為vertical
    menu-trigger="click" //子菜單打開的方式為點擊 默認值hover(只在mode為horizontal時生效)
    @select="handleSelect" //菜單激活回調 text-color="#3EF7E1" //菜單文字顏色
    :unique-opened="true" //只打開一個子菜單 :router="true" //啟用該模式會在激活導航時以 index 作為 path
    進行路由跳轉 active-text-color="#3EF7E1"> //當前被激活的菜單的文字顏色 <el-menu-item
    :index="child1.url" //可進行跳轉 v-for="child1 in menuList" //循環 :key="child1.id"
    v-if="!child1.childNode"> //如果只有一級 沒有子菜單 {{ child1.name }} //顯示菜單名稱
    </el-menu-item> <el-submenu :popper-append-to-body="false" //設置此屬性
    popper-class才可以生效 popper-class="amenu" //設置class名稱 :index="child1.url"
    v-for="child1 in menuList" :key="child1.id" v-if="child1.childNode"> //如果有子菜單
    <template slot="title">{{ child1.name }}</template> <el-menu-item
    :index="child2.url" v-for="child2 in child1.childNode" :key="child2.id"
    v-if="!child2.childNode"> {{ child2.name }} </el-menu-item> </el-submenu>
    </el-menu>
    ?或者
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
    menu-trigger="click" @select="handleSelect" text-color="#3EF7E1"
    :unique-opened="true" :router="true" active-text-color="#3EF7E1"> <template
    v-for="item in menuList"> <el-submenu
    v-if="item.childNode!=''||item.childNode!=null" :key="item.id" :index="item.id"
    :class="item.id == 2 ? 'menu2' : 'menu1'"> <template slot="title"> <span>{{
    item.name }}</span> </template> <el-menu-item :index="child.id" v-for="child in
    item.childNode" :key="child.id"> {{ child.name }} </el-menu-item> </el-submenu>
    <el-menu-item v-else :key="item.id" class="menu1" :index="item.id"> {{
    item.name }} </el-menu-item> </template> </el-menu>
    js部分
    export default { name: "NavHeader", data() { return { activeIndex: 'PageHome',
    menuList:[ { "name":"監控總覽", "pid":0, "id":1, "url":"PageHome", }, {
    "name":"設備管理", "pid":0, "id":2, "url":"equipmentManagement", "childNode":[ {
    "name":"北斗終端", "pid":2, "id":200, "url":"BDManagement", }, { "name":"接收機",
    "pid":2, "id":201, "url":"ReceiverMana", }, { "name":"指揮機", "pid":2, "id":202,
    "url":"CommandMana", } ] }, { "name":"統計分析", "pid":0, "id":3,
    "url":"statisticalAnalysis", "childNode":[ { "name":"終端在線", "pid":3, "id":300,
    "url":"TerminalOnline", }, { "name":"線路負載", "pid":3, "id":301,
    "url":"LineLoad", }, { "name":"數據包", "pid":3, "id":302, "url":"DataPackage", },
    { "name":"數據幀", "pid":3, "id":303, "url":"DataFrame", }, { "name":"排隊包數",
    "pid":3, "id":304, "url":"QueueNumber", } ] }, { "name":"系統管理", "pid":0,
    "id":4, "url":"systemManage", "childNode":[ { "name":"用戶管理", "pid":4, "id":400,
    "url":"HtUser", }, { "name":"角色管理", "pid":4, "id":401, "url":"HtRole", }, {
    "name":"巡檢管理", "pid":4, "id":402, "url":"InspectionHistory", }, {
    "name":"字典管理", "pid":4, "id":403, "url":"dictionaryManage", }, { "name":"服務監控",
    "pid":4, "id":404, "url":"serviceControl", }, { "name":"日志管理", "pid":4,
    "id":405, "url":"lodManage", }, { "name":"菜單管理", "pid":4, "id":406,
    "url":"HtMenu", }, { "name":"系統配置", "pid":4, "id":407,
    "url":"SysConfiguration", }, { "name":"組織管理", "pid":4, "id":408,
    "url":"organizeManage", } ] } ] }; }, computed: { }, methods: {
    handleSelect(key, keyPath) { console.log(key, keyPath); } } };
    ?樣式部分
    <style scoped> /*菜單樣式*/ /*設置字體變粗 設置層級*/ .el-menu-demo{ font-weight: 700;
    z-index: 1000; } /*設置li不選中時的背景色 字體大小*/ /deep/ .el-menu-demo li{
    background-color: rgb(0, 0, 0, 0.2); font-size: 17px; } /deep/ .el-menu-demo li
    .el-submenu__title{ font-size: 17px; } /*去掉右側小三角形*/ /deep/
    .el-submenu__icon-arrow{ display: none; } /*鼠標懸停li背景色*/ /deep/
    .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, /deep/
    .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, /deep/
    .el-menu--horizontal>.el-submenu .el-submenu__title:hover{ background-color:
    #7B7B7B; } /*一級菜單設置高度*/ /deep/ .el-menu--horizontal>.el-menu-item{ height:
    100%; line-height: 47px; } /*二級菜單設置高度*/ /deep/ .el-menu--horizontal>.el-submenu
    .el-submenu__title{ height: 100%; line-height: 47px; border-bottom:7px solid
    #116EA5!important;/*二級列表未選中*/ } /deep/
    .el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom:7px solid #3EF7E1!important;/*二級列表選中*/ } /*一級列表未選中*/
    .el-menu--horizontal>.el-menu-item{ border-bottom:7px solid #116EA5!important;
    } /*一級列表選中*/ .el-menu--horizontal>.el-menu-item.is-active{ border-bottom:7px
    solid #3EF7E1!important; } /deep/ .el-menu--horizontal.amenu{ background:
    url(../../assets/header/xiala.png) no-repeat!important; background-size: 100%
    100%!important; padding:30px 0; } /deep/ .el-menu--horizontal.amenu .el-menu{
    background: transparent!important; } /deep/ .el-menu--horizontal.amenu .el-menu
    li{ background: transparent!important; text-align: center; } /*菜單樣式結束*/ </style>
    ?

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频