According to the route rendering list (filtered by permissions), the error icon component is not defined

problem description

sidebar





:

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with a picture)
/ / sidebar
< Menu vMustshow = "! collapsed" width= "auto" theme= "dark" @ on-select= "handerSelect" >

    <template v-for="item in list">
        <re-submenu
          v-if="item.children"
          style="text-align: left"
          :key="`menu_${item.name}`"
          :name="item.name"
          :parent="item">
        </re-submenu>
        <menu-item v-else :key="`menu_${item.name}`" :name="item.name" style="text-align: left; ">
          <Icon :type="item.meta.icon"  style="margin-top: -3px;"/>
          {{ item.meta.title }}
        </menu-item>
    </template>
  </Menu>
  <!--  -->
  <div v-show="collapsed" class="drow-warpper">
    <template v-for="item in list">
        <re-dropdown
          @on-select="handlSelect"
          v-if="item.children"
          :key="`drop-${item.name}`"
          :parent="item"
          icon-color="-sharpfff"
          :showtitle="false"
          >
        </re-dropdown>
        <Tooltip v-else transfer :content="item.title" placement="right" :key="`drop-${item.name}`" >
          <span class="drop-menu-span">
            <Icon @click="handlClick(item.name)" :type="item.meta.icon" :size="20" class="drop-icon" color="-sharpfff"/>
          </span>
        </Tooltip>

/ /
< template >
< Submenu: name= "parent.name" >

<template slot="title">
  <Icon :type="parent.meta.icon"/>
  {{ parent.meta.title }}
</template>
<template v-for="item in parent.children">
    <!-- <re-submenu
      v-if="item.children"
      :key="`menu_${item.name}`"
      :name="item.name"
      :parent="item"
    >
    </re-submenu> -->
    <menu-item :key="`menu_${item.name}`" :name="item.name" style="padding-left: 50px;">
      {{ item.meta.title }}
    </menu-item>
  </template>

< / Submenu >
< / template >

/ / hide
< template >

<Dropdown @on-click="handlClick" placement="right-start">
    <span class="drop-menu-a" :style="titleStyle">
        <Icon :type="parent.meta.icon" :color="iconColor" :size="20" class="drop-icon"/>
        <!-- <span v-if="showtitle">{{ parent.meta.title }}</span> -->
    </span>
    <DropdownMenu slot="list">
      <template v-for="item in parent.children">
        <!-- <re-dropdown
          v-if="item.children"
          :key="`drop-${item.name}`"
          :parent="item"
          >
        </re-dropdown> -->
        <DropdownItem :key="`drop-${item.name}`" :name="item.name" >
            <span style="text-align: left">{{item.meta.title}}</span>
        </DropdownItem>
      </template>
    </DropdownMenu>
</Dropdown>

< / template >

what result do you expect? What is the error message actually seen?

ask the boss to help me point out the problem. When I render the components of the secondary menu list, the icon error still does not disappear, there are still 2. You can determine the icon introduction problem in the secondary component and rendering level list. The function has not been affected

Apr.14,2022
Menu