element中el-menu-item图标不显示

Question

element中的el-menu-item这个标签在没有二级菜单的时候，折叠后一级菜单图标不显示，请问这是啥问题
就算我把图标写成固定的，也是一样的不能显示

在线等

这是渲染菜单的代码

<el-menu :default-active="$route.path" unique-opened class="el-menu-vertical-demo" router
                                background-color="#304156" text-color="#fff" :collapse="menuStatus">

                                <component class="menu-item" v-for="item in menuTreeData" :key='item.pagePath'
                                    :index='item.pagePath'
                                    :is="(item.children && item.children.length>0)? 'el-submenu' : 'el-menu-item'">
                                    
                                    <template slot="title">
                                        <i :class="item.icon"></i>
                                        <span slot="title">{{item.menuName}}</span>
                                    </template>
                                    
                                    
                                    <template v-if="item.children && item.children.length>0">
                                        <el-menu-item v-for="item2 in item.children" :key='item2.pagePath'
                                            :index="item2.pagePath">
                                            <i :class="item2.icon"></i>
                                            <span>{{item2.menuName}}</span>
                                        </el-menu-item>
                                    </template>

                                </component>
                            </el-menu>

Answer 1

看官方文档，el-menu-item的时候icon是放在template 的外面的。不是放在里面的。改成放到外面后就可以正常显示了。

<i :class="item.icon"></i>
<template #title>
  <span>{{ item.menuName }}</span>
</template>

而不是

<template #title>
    <i :class="item.icon"></i>
    <span>{{ item.menuName }}</span>
</template>

可以把你的代码改成这样。供你参考：

<template>
  <el-menu :default-active="currentMenu" unique-opened class="el-menu-vertical-demo" router
           background-color="#304156" text-color="#fff" :collapse="menuStatus">
    <template v-for="item in menuTreeData" :key='item.pagePath'>
      <template v-if="item.children && item.children.length>0">
        <el-submenu :index='item.pagePath'>
          <template #title>
            <i :class="item.icon"></i>
            <span>{{ item.menuName }}</span>
          </template>
          <el-menu-item v-for="item2 in item.children" :key='item2.pagePath'
                        :index="item2.pagePath">
            <i :class="item2.icon"></i>
            <span>{{ item2.menuName }}</span>
          </el-menu-item>
        </el-submenu>
      </template>

      <template v-else>
        <el-menu-item :index='item.pagePath'>
          <i :class="item.icon"></i>
          <template #title>
            <span>{{ item.menuName }}</span>
          </template>
        </el-menu-item>
      </template>
    </template>