Element: [Bug Report] 动态渲染的菜单无法高亮

[zhengxs2018]

我的侧边栏的菜单是动态生成的，每次动态生成的时候都会把 el-menu 组件的 activedIndex 重置为空

页面第一次进入的时候高亮有作用，但是当我切换顶部导航的时候就没有反应了

我的期望是列表动态生成，然后自动根据 $route.path 的值进行高亮

框架版本

• element-ui : 1.4.0
• vue: 2.3.3
• vue-router: 2.6.0

侧边栏代码

<template>
  <div class="ui-sidebar">
    <div class="ui-sidebar__inner">
      <el-menu class="ui-sidebar__menus"
               menu-trigger="click"
               :collapse="layoutSetting.isCollapsed"
               :router="true"
               :default-active="$route.path">

        <!--生成子菜单-->
        <ui-submenu v-for="menuItem in menus" :item="menuItem" :key="menuItem.path"></ui-submenu>
      </el-menu>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { mapState } from 'vuex'

  import UISliderSubMenu from './ui-slider-submenu.vue'

  export default{
    name: 'ui-sidebar',
    props: ['menus'],
    computed: mapState(['layoutSetting']),
    components: {
      [UISliderSubMenu.name]: UISliderSubMenu
    }
  }
</script>

ui-slider-submenu.vue 文件代码

这是一个递归组件

<template>
  <!--动态渲染组件-->
  <component :is="name" :index="item.path" :route="item">

    <!--生成标题-->
    <template slot="title">
      <i :class="item.iconClass" v-if="item.iconClass"></i>
      <span slot="title">{{ item.title }}</span>
    </template>

    <!--循环生成二级菜单-->
    <template v-if="flag">
      <ui-submenu v-for="child in item.children" :item="child" :key="child.path"></ui-submenu>
    </template>
  </component>
</template>

<script type="text/ecmascript-6">
  export default{
    name: 'ui-submenu',
    data () {
      let {children} = this.item || {}
      let flag = Array.isArray(children) && children.length > 0
      return {
        flag,
        name: flag ? 'el-submenu' : 'el-menu-item'
      }
    },
    props: ['item']
  }
</script>

[element-bot]

Hello, this issue has been closed because it does not conform to our issue requirements. Please submit issues with issue-generator. More info can be found in #3693.

[shen-lan]

大兄弟 遇到的情况和你一样，最后怎么解决的？

[zhengxs2018]

没解决，我换公司了，那边不知道情况这么样😄

[legendJaden]

@zhengxs2018 我们遇到一样的问题, 把template标签改成div就好了(当然除了vue组件最外层的template). 似乎是因为template不能直接做template的子节点, 至少要隔一代, 具体的原理还需深究. 例如:

<template>
  <div>
    <template></template>
  </div>
</template

这样也OK.
BTW, 你也不用换公司这么大动干戈呀...

[zhengxs2018]

个人原因换公司，和框架无关，啊哈哈啊