Element: Depois que o NavMenu usa para renderização, o menu não pode ser expandido normalmente

Você pode formatar seu código primeiro e usar 3 pontos oblíquos

@ erguotou520 foi formatado, ler novamente, obrigado ~
`` `

Como o índice de el-menu-item é usado para redirecionamento de roteamento, o link do roteador não deve ser usado. Por que ele não é expandido, não é muito claro.

Após @ erguotou520 set default-openeds = "[2]", ele pode ser expandido por padrão, mas não pode ser clicado para fechar. Eu li este problema: https://github.com/ElemeFE/element/issues/2279 Use : default- openeds = "[2]" mas não pode ser aberto por padrão, e nenhum tutorial sobre como usar o default-openeds pode ser encontrado na documentação do site oficial.

O comentário acabou de ser excluído, porque descobri que meu sistema pode ser expandido automaticamente, sem aberturas padrão.

@ erguotou520 Bom, isso só pode ser feito primeiro, muito obrigado pela entusiástica ajuda!

@ erguotou520 Sim, este link do roteador é redundante e excluído ~

Além disso, não há necessidade de template para ajudar, é possível adicionar diretamente v-if em el-submenu e el-menu-item

@ erguotou520 está ok mesmo, é muito mais conciso de uma vez, acabei de contatar a vue, não

Se você seguir as regras normais, deve ser capaz de expandir automaticamente. Você pode tentar novamente e fechar o problema, se possível.

@ erguotou520 ainda não consegue expandir normalmente, só consigo destacar
`` `

O meu está ok, quanto ao porque o seu não é bom, você tem que pedir a eles para desenvolvê-lo

@ erguotou520 Você

<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 Acabei de escrever manualmente desta forma no início, não é problema, mas toda a renderização com for é inválida

Isso não é muito claro

@ erguotou520 Muito obrigado pela ajuda

Também encontrei o mesmo problema. Ao atualizar, se todos os menus forem escritos à mão e o item de menu estiver destacado, o submenu correspondente será expandido; mas se for renderizado por v-for, o item de menu será destacado, Mas o submenu correspondente não se expandirá

Nenhuma solução para o mesmo problema

Encontrou o mesmo problema, não há solução, o índice passado com o loop for só pode ser destacado, não expandido automaticamente

Da mesma forma que acima, o índice passado com o loop for só pode ser destacado e não pode ser expandido automaticamente.Eu sinto que o suporte ao atributo default-openeds não é particularmente amigável

Da mesma forma que acima, o loop for não pode ser expandido automaticamente sem solução

O meu pode

Parece um problema com sua estrutura de dados

Parece que encontrei um problema semelhante devido à geração dinâmica do conteúdo do menu. Talvez seus dados de passagem estejam vazios a princípio?
Usou temporariamente algumas soluções alternativas estranhas para evitar este problema

@reverland acha que isso deve ser causado por este motivo. Volte para testar hoje à noite, se for, você pode usar localStorage / sessionStorage para cache de dados de menu

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

@ erguotou520 Qual é o $ t no seu trecho de código. .Peça conselhos

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 Internacionalização

Esse problema é causado porque seus dados são assíncronos, portanto, neste caso, você deve definir a abertura padrão uma vez quando os dados chegarem.

Basicamente, percebi minhas necessidades usando default-openeds + select event + sessionStorage do componente NavMenu. O código é o seguinte:

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

selecione o evento

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

Se houver uma maneira melhor, por favor me avise, obrigado!

@kouguopeng , os dados em sua matriz de informações são gravados diretamente nos dados?

É assim que faço todos os menus de primeiro nível abertos por padrão

  <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>

Uma vez que é a razão para obter os dados do menu de forma assíncrona, basta adicionar a instrução v-if ao componente el-menu para julgar.
Por exemplo, você pode definir o menuList para ser inicializado em uma matriz vazia, adicionar o julgamento de v-if = "menuList.length> 0" ao componente el-menu e o componente el-menu continuará quando os dados do menu é obtido através de uma solicitação assíncrona Rendering, desta forma, configurando o default-active também pode destacar e expandir o menu normalmente.
Escrevi um exemplo simples: https://jsfiddle.net/w340e5w9/1/

@kouguopeng gostaria de pedir, por meio de renderizar dinamicamente o menu, geralmente os dados do nosso menu são uma estrutura de árvore, sem recursão, como podem ser renderizados camada por camada, vejo o código que você postou, sei No segundo nível, se houver filhos no segundo nível, como você pode renderizá-lo? Você só pode renderizar um menu de 2 níveis como este.