欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Element-plus側(cè)邊欄踩坑的問(wèn)題解決

 更新時(shí)間：2023年08月20日 11:34:20   作者：真讓人禿頭呀  
本文主要介紹了Element-plus側(cè)邊欄踩坑的問(wèn)題解決,主要解決了el-menu直接嵌套el-menu-item菜單,折疊時(shí)不會(huì)出現(xiàn)文字顯示和小箭頭無(wú)法隱藏的問(wèn)題,具有一定的參考價(jià)值,感興趣的可以了解一下

問(wèn)題描述

el-menu直接嵌套el-menu-item菜單，折疊時(shí)不會(huì)出現(xiàn)文字顯示和小箭頭無(wú)法隱藏的問(wèn)題，但是實(shí)際開發(fā)需求中難免需要把el-menu-item封裝為組件

解決

vue3項(xiàng)目中嵌套兩層template

<template>
    <template v-for="item in list" :key="item.path">
        <!--  一級(jí)路由 -->
        <el-menu-item v-if="!item.children && !item.meta?.hidden" :index="item.path">
            <el-icon size="30px">
                <component :is="item.meta?.icon"></component>
            </el-icon>
            <template #title>
                <span class="ml-1">{{ item.meta?.title }}</span>
            </template>
        </el-menu-item>
        <!--  二級(jí)路由但只有一個(gè)子項(xiàng) -->
        <el-menu-item v-if="(item.meta?.single && item.children) && !item.meta?.hidden" :index="item.children[0].path">
            <el-icon size="30px">
                <component :is="item.children[0].meta?.icon"></component>
            </el-icon>
            <template #title>
                <span class="ml-1">{{ item.children[0].meta?.title }}</span>
            </template>
        </el-menu-item>
        <!--  二級(jí)路由 -->
        <el-sub-menu :index="item.path" v-if="(item.children && item.children.length > 1) && !item.meta?.hidden">
            <template #title>
                <el-icon size="30px">
                    <component :is="item.meta?.icon"></component>
                </el-icon>
                <span class="ml-1">{{ item.meta?.title }}</span>
            </template>
            <!--  遞歸路由 -->
            <MenuItem :list="item.children">
            </MenuItem>
        </el-sub-menu>
    </template>
</template>

效果

到此這篇關(guān)于Element-plus側(cè)邊欄踩坑的問(wèn)題解決的文章就介紹到這了,更多相關(guān)Element-plus側(cè)邊欄踩坑內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！ 

相關(guān)文章

最新評(píng)論