iView动态生成Menu时open-names不生效的解决办法


  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();
      })
    }
  },

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM