Element-Plus左侧导航条收缩二级菜单图标不显示

最新推荐文章于 2024-03-28 15:15:12 发布

m0_55370389

最新推荐文章于 2024-03-28 15:15:12 发布

阅读量1.3k

点赞数 4

文章标签： vue elementui Powered by 金山文档

本文链接：https://blog.csdn.net/m0_55370389/article/details/128595997

版权

点击收缩以后会发生这样的问题

其他的图标不见了

<template>
    <el-aside :width="$store.state.isCollapse ? '200px' : '50px'">
        <el-menu :collapse-transition="false" :collapse="!$store.state.isCollapse" class="el-menu-vertical-demo"
            text-color="#fff" background-color="#545c64">
            <el-menu-item :index="item.path" v-for="item in noChildren()" :key="item.path">
                <component class="icons" :is="item.icon"></component>
                <span>{{ item.label }}</span>
            </el-menu-item>
            <el-sub-menu :index="item.path" v-for="item in hasChildren()" :key="item.path">
                <template #title>
                    <component class="icons" :is="item.icon"></component>
                    <span>{{ item.label }}</span>
                </template>
                <el-menu-item-group>
                    <el-menu-item v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.path">
                        <component class="icons" :is="subItem.icon"></component>
                        <span>{{ subItem.label }}</span>
                    </el-menu-item>
                </el-menu-item-group>
            </el-sub-menu>
        </el-menu>
    </el-aside>
</template>

这时我们只需要在二级菜单的<component></component>外加上<el-icon>

<template #title>
    <el-icon>
        <component class="icons" :is="item.icon"></component>
    </el-icon>
    <span>{{ item.label }}</span>
</template>

就解决了