快捷導(dǎo)航

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)文章

vue3中proxy的基本用法說(shuō)明
這篇文章主要介紹了vue3中proxy的基本用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue 開發(fā)企業(yè)微信整合案例分析
這篇文章主要介紹了vue 開發(fā)企業(yè)微信整合,結(jié)合具體案例形式分析了vue.js使用企業(yè)微信JSSDK實(shí)現(xiàn)手機(jī)端程序可以和企業(yè)微信進(jìn)行整合功能的相關(guān)操作技巧,需要的朋友可以參考下
2019-12-12
通過(guò)vue方式實(shí)現(xiàn)二維碼掃碼功能
這篇文章給大家介紹了通過(guò)vue的方式，實(shí)現(xiàn)掃碼功能，實(shí)現(xiàn)步驟分為兩步，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧
2021-11-11
vite2.0 踩坑實(shí)錄
本文主要介紹了vite2.0 踩坑，記錄了一些在配置項(xiàng)目中遇到的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
vue使用自定義指令實(shí)現(xiàn)拖拽
這篇文章主要為大家詳細(xì)介紹了vue使用自定義指令實(shí)現(xiàn)拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
vue基于element-ui的三級(jí)CheckBox復(fù)選框功能的實(shí)現(xiàn)代碼
最近vue項(xiàng)目需要用到三級(jí)CheckBox復(fù)選框，需要實(shí)現(xiàn)全選反選不確定三種狀態(tài)。這篇文章主要介紹了vue基于element-ui的三級(jí)CheckBox復(fù)選框功能的實(shí)現(xiàn)方法,需要的朋友可以參考下
2018-10-10
Vue完整版和runtime版的區(qū)別詳解
這篇文章主要為大家介紹了Vue完整版和runtime版的區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
基于vue+h5實(shí)現(xiàn)車牌號(hào)輸入框功能(demo)
最近開發(fā)項(xiàng)目是學(xué)校校內(nèi)車輛超速方面的統(tǒng)計(jì)檢測(cè)方面的系統(tǒng),在開發(fā)過(guò)程中發(fā)現(xiàn)有個(gè)小功能,就是用戶移動(dòng)端添加車牌號(hào),剛開始想著輸入框,提交時(shí)正則效驗(yàn)一下格式,最后感覺(jué)不方便,所以就簡(jiǎn)單自己手寫了一個(gè)H5車牌號(hào)軟鍵盤,對(duì)vue車牌號(hào)輸入框?qū)崿F(xiàn)代碼感興趣的朋友一起看看吧
2025-03-03
關(guān)于el-table表格組件中插槽scope.row的使用方式
這篇文章主要介紹了關(guān)于el-table表格組件中插槽scope.row的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue性能優(yōu)化的方法
這篇文章主要介紹了Vue性能優(yōu)化的方法，文中講解非常細(xì)致，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下
2020-07-07