一个叫Y的程序猿 2021-09-10 14:34 采纳率: 100%
浏览 1021
已结题

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

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>

img

img

  • 写回答

1条回答 默认 最新

  • tonyzhangcn 2021-09-10 16:16
    关注

    看官方文档,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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 9月13日
  • 已采纳回答 9月13日
  • 创建了问题 9月10日

悬赏问题

  • ¥20 关于#c++#的问题:水果店管理系统
  • ¥30 dbLinq最新版linq sqlite
  • ¥20 对D盘进行分盘之前没有将visual studio2022卸载掉,现在该如何下载回来
  • ¥15 完成虚拟机环境配置,还有安装kettle
  • ¥15 2024年全国大学生数据分析大赛A题:直播带货与电商产品的大数据分析 问题5. 请设计一份优惠券的投放策略,需要考虑优惠券的数量、优惠券的金额、投放时间段和投放商品种类等因素。求具体的python代码
  • ¥15 有人会搭建生鲜配送自营+平台的管理系统吗
  • ¥15 用matlab写代码
  • ¥30 motoradmin系统的多对多配置
  • ¥15 求组态王串口自定义通信配置方法或代码?
  • ¥15 实验 :UML2.0 结构建模