欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Element plus NavMenu 导航菜单使用

程序员文章站 2022-06-06 23:37:23
...
<el-menu 
   :default-active="active"
    class="sidebar-menu"
    background-color="#f9f9f9"
    text-color="#565656"
    unique-opened
    router
    active-text-color="#0079fe"
    :collapse="isCollapse"
    @select="handleSelect">
    <template v-for="item in menuList">
            <template v-if="item.children&&item.level==0">
                <el-submenu :index="String(item.id)" :key="item.id">
                        <template #title>
                            <i class="el-icon-s-order" style="margin-right: 5px;font-size:20px;"></i>
                            <span>{{ item.menuName }}</span>
                        </template>
                        <el-menu-item v-for="(items, i) in item.children" :key="i" :index="items.menuUrl" :route="`/${items.menuUrl}`" :to="items.id" >
                        {{items.menuName}}
                        </el-menu-item>
                </el-submenu>
            </template>
            <template v-else>
                <template v-if="item.children&&item.level==0">
                    <el-submenu :index="String(item.id)" :key="item.id">
                            <template #title>
                                <i class="el-icon-s-order" style="margin-right: 5px;font-size:20px;"></i>
                                <span>{{ item.menuName }}</span>
                            </template>
                            <el-menu-item v-for="(items, i) in item.children" :key="i" :index="items.menuUrl" :route="`/${items.menuUrl}`" :to="items.id" >
                            {{items.menuName}}
                            </el-menu-item>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.menuUrl" :route="`/${item.menuUrl}`" :key="item.id" :to="item.id">
                        {{item.menuName}}
                    </el-menu-item>
                </template>
            </template>
        </template>
</el-menu>

这里面主要是 :default-active=“active” 这句话非常重要 active
:route="/${items.menuUrl}" 需要跟active里的值相等
例如:http://localhost:8081/inquiryDisposal
active = inquiryDisposal
route = “inquiryDisposal”