iView中的Menu导航菜单组件,为页面和功能提供导航的菜单列表,常用在网站的左侧或者顶部。
最近做的一个Vue项目中,导航数据需要动态加载并生成,默认展开第一个submenu,激活第一个menu。如下:
<Menu ref="side_menu" theme="dark" :active-name="activeName" :open-names="openNames" accordion> <Submenu :name="menu.name" v-for="menu in menuList" :key="menu.title"> <template slot="title"> <img :src="menu.logo"> {{menu.title}} </template> <MenuGroup> <MenuItem :name="submenu.name" v-for="submenu in menu.subMenuList" :key="submenu.title" :to="submenu.url">{{ submenu.title }}</MenuItem> </MenuGroup> </Submenu> </Menu>
this.activeName = '1-1', this.openNames = ['1'],
但是却出现了activeName生效,但是openNames不生效的情况,经上网查询,解决方案如下:
运用Menu的updateopened方法:手动更新展开的子目录,注意要在 $nextTick 里调用。对openNames添加watch:
watch: { openNames() { this.$nextTick(() => { this.$refs.side_menu.updateOpened(); this.$refs.side_menu.updateActiveName(); }) } },