Element: Après que NavMenu utilise pour le rendu, le menu ne peut pas être développé normalement

Pouvez-vous d'abord formater votre code et utiliser 3 points obliques

@erguotou520 a été formaté, relire , merci~
```

Étant donné que l'index de el-menu-item est utilisé pour la redirection de routage, router-link ne doit pas être utilisé. Quant à savoir pourquoi il n'est pas étendu, ce n'est pas très clair.

Après @erguotou520 set default-openeds="[2]", il peut être développé par défaut, mais il ne peut pas être cliqué pour fermer. J'ai lu ce numéro : https://github.com/ElemeFE/element/issues/2279 :default-openeds="[2]" mais il ne peut pas être ouvert par défaut, et aucun tutoriel sur l'utilisation de default-openeds ne peut être trouvé dans la documentation officielle du site Web.

Le commentaire vient d'être supprimé, car j'ai constaté que mon système peut être automatiquement étendu sans ouverture par défaut.

@erguotou520 Eh bien, cela ne peut être fait qu'en premier, merci beaucoup pour votre aide enthousiaste !

@erguotou520 Oui, ce lien de routeur est redondant et supprimé~

De plus, il n'y a pas besoin de template pour aider, il est possible d'ajouter directement v-if sur el-submenu et el-menu-item

@erguotou520 est en effet

Si vous suivez les règles normales, il devrait pouvoir se développer automatiquement. Vous pouvez réessayer et fermer le problème si possible.

@erguotou520 ne peut toujours pas se développer normalement, ne peut que mettre en évidence
```

Le mien est ok, quant à pourquoi le vôtre n'est pas bon, vous devez leur demander de le développer

@erguotou520 Pourriez- vous s'il vous plaît publier ce rendu de menu pour avoir un aperçu, laissez-moi comparer et m'y référer

<el-menu :default-active="$route.path" theme="dark" :router="true">
  <el-menu-item index="/subsystems"><i class="iconfont icon-system"></i>{{$t('menu.subsystem')}}</el-menu-item>
  <el-submenu index="/workflow">
    <template slot="title"><i class="iconfont icon-process"></i>{{$t('menu.flow')}}</template>
    <el-menu-item index="/flow/workflows"><i class="iconfont icon-template"></i>{{$t('menu.workflows')}}</el-menu-item>
    <el-menu-item index="/flow/my"><i class="iconfont icon-flow"></i>{{$t('menu.myFlow')}}</el-menu-item>
  </el-submenu>
  <el-submenu index="/base">
    <template slot="title"><i class="el-icon-information"></i>{{$t('menu.base')}}</template>
    <el-menu-item index="/base/departments"><i class="iconfont icon-cluster"></i>{{$t('menu.departments')}}</el-menu-item>
    <el-menu-item index="/base/users"><i class="iconfont icon-users"></i>{{$t('menu.users')}}</el-menu-item>
    <el-menu-item index="/base/roles"><i class="iconfont icon-roles"></i>{{$t('menu.roles')}}</el-menu-item>
  </el-submenu>
</el-menu>

@erguotou520 Je viens de l'écrire manuellement de cette manière au début, ce n'est pas un problème, mais tout le rendu avec pour est invalide

ce n'est pas très clair

@erguotou520 Eh bien, merci beaucoup pour votre aide

J'ai également rencontré le même problème. Lors de l'actualisation, si tous les menus sont écrits à la main et que l'élément de menu est mis en surbrillance, le sous-menu correspondant sera développé ; mais s'il est rendu par v-for, l'élément de menu sera mis en surbrillance , Mais le sous-menu correspondant ne se développera pas

Pas de solution au même problème

Rencontré le même problème, il n'y a pas de solution, l'index passé avec la boucle for ne peut être mis en surbrillance, pas automatiquement développé

Comme ci-dessus, l'index transmis avec la boucle for ne peut être mis en surbrillance et ne peut pas être développé automatiquement.Je pense que la prise en charge de l'attribut default-openeds n'est pas particulièrement conviviale

Identique à ci-dessus, la boucle for ne peut pas être automatiquement étendue sans solution

Le mien peut

Cela ressemble à un problème avec votre structure de données

Il semble que j'aie rencontré un problème similaire en raison de la génération dynamique de contenu de menu.Peut-être que vos données de parcours sont vides au début ?
Utilisé temporairement des solutions de contournement étranges pour éviter ce problème

@reverland pense que cela devrait être causé par cette raison. Revenez au test ce soir, si c'est le cas, vous pouvez utiliser localStorage/sessionStorage pour la mise en cache des données de menu

@arzcl https://github.com/ElemeFE/element/pull/3671

@erguotou520 Quel est le $t dans votre extrait de code. .Demander conseil

Property or method "$t" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

@Ppsj Internationalisation

Ce problème est dû au fait que vos données sont asynchrones. Dans ce cas, vous devez donc définir les ouvertures par défaut une fois lorsque les données arrivent.

J'ai essentiellement réalisé mes besoins en utilisant le default-openeds + select event + sessionStorage du composant NavMenu.Le code est le suivant :

    // 每次载入路由的时候，都利用 sessionStorage 取值对 NavMenu  做展开处理
    if (sessionStorage.getItem('defaultOpeneds') !== null) {
          self.defaultOpeneds = [sessionStorage.getItem('defaultOpeneds')]
     }

sélectionner un événement

    handleSelect (key, keyPath) {
         // 利用 sessionStorage 储存当前点击的菜单组
        sessionStorage.setItem('defaultOpeneds', keyPath[0])
    }

S'il y a un meilleur moyen, faites-le moi savoir, merci!

@kouguopeng , les données de votre tableau d'informations sont-elles écrites directement dans les données ?

C'est ainsi que je rends tous les menus de premier niveau ouverts par défaut

  <el-menu :default-active="$route.fullPath"
             :default-openeds="links.map(item => item.path)"
             router>
        <template v-for="(link, index) in links"
                  v-if="!link.hide && link.path">
            <el-submenu v-if="link.children && link.children.length"
                        :key="link.path"
                        :index="link.path">

                <template v-if="link.empty"
                          slot="title"
                          class="submenu-title">
                    <i :class="link.icon"></i>
                    <span v-text="$t(link.i18n)"></span>
                </template>
                <el-menu-item v-else
                              slot="title"
                              class="submenu-title"
                              :index="link.path">
                    <i :class="link.icon"></i>
                    <span v-text="$t(link.i18n)"></span>
                </el-menu-item>

                <el-menu-item v-for="(childLink, childIndex) in link.children"
                              v-if="!childLink.hide && childLink.path"
                              :key="childLink.path"
                              :index="childLink.path">
                    <i :class="childLink.icon"></i>
                    <span v-text="$t(childLink.i18n)"></span>
                </el-menu-item>
            </el-submenu>

            <el-menu-item v-else
                          :key="link.path"
                          :index="link.path">
                <i :class="link.icon"></i>
                <span v-text="$t(link.i18n)"></span>
            </el-menu-item>

        </template>
    </el-menu>

Étant donné que c'est la raison pour laquelle les données du menu sont obtenues de manière asynchrone, ajoutez simplement l'instruction v-if au composant el-menu pour en juger.
Par exemple, vous pouvez définir le menuList à initialiser sur un tableau vide, ajouter le jugement de v-if="menuList.length>0" au composant el-menu, et le composant el-menu se poursuivra lorsque les données du menu est obtenu via une requête asynchrone Rendering, de cette manière, la définition de la valeur par défaut active peut également mettre en évidence et développer le menu normalement.
J'ai écrit un exemple simple : https://jsfiddle.net/w340e5w9/1/

@kouguopeng Je voudrais demander, pour rendre dynamiquement le menu, généralement nos données de menu sont une structure arborescente, sans récursivité, comment peut-elle être rendue couche par couche, je vois le code que vous avez posté, sachez Au deuxième niveau, s'il y a des enfants sous le deuxième niveau, comment pouvez-vous le rendre ? Vous ne pouvez rendre qu'un menu à 2 niveaux comme celui-ci.