解决elemnets+vue动态导入图标问题

解决elemnets+vue动态导入图标问题

渲染代码

export const shipManagementMenu = [
  {
    index: '/shipManagement',
    title: '进出港统计',
    icon: 'List',
    children: [
      {
        index: '/shipManagement/DepartureApplication',
        title: '出港申请',
        icon: 'CollectionTag'
      },
      {
        index: '/shipManagement/PortRecord',
        title: '进出港记录',
        icon: 'CollectionTag'
      }
    ]
  }
]

错误代码

  <el-icon><{{ item.icon }} /></el-icon>

错误效果

解决方法：使用component

正确代码

 <el-menu
        :default-active="route.path"
        class="el-menu-vertical-demo"
        :collapse="props.isCollapse"
        router
      >
        <template v-for="(item, index) in shipManagementMenu" :key="index">
          <el-sub-menu :index="item.index">
            <template #title>
              <el-icon>
                <component :is="item.icon"></component>
              </el-icon>
              <span>{{ item.title }}</span>
            </template>
            <template v-for="(obj, i) in item.children" :key="i">
              <el-menu-item :index="obj.index">{{ obj.title }}</el-menu-item>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>

正确效果