问题:dataArray、activeIndex 都变化后,页面的一级菜单没有按照 activeIndex 进行高亮。
解决方法:el-menu-item 的 key 不能绑定为 i,应该绑定唯一值,例如和 index 绑定相同的值。
原因分析:猜测与虚拟 DOM 的渲染机制有关。
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
>
<el-submenu index="1">
<template slot="title">xxxx</template>
<el-menu-item
:index="item.value"
v-for="(item, i) in dataArray"
:key="item.value"
:label="item.name"
@click.native="handleClick(item)"
>{{ item.name }}
</el-menu-item>
</el-submenu>
<el-submenu index="2">
……
</el-submenu>
<el-submenu index="3">
……
</el-submenu>
</el-menu>