iview menu組件手動收起與展開

本文主要介紹menu組件在有子菜單時如何手動的展開與收起。

展開：

　　在需要展開的地方先設置openname變量如this.openname = ["設置"];

　　再在$nextTick中調用updateOpened方法

　　this.$nextTick(()=> {
　　　　this.$refs.child1.updateOpened();
　　});

收起：

　　一般是用不着手動收起的，在有多個子菜單並設置了accordion為true時，打開別的子菜單會自動將其他子菜單收起，而我的項目只有一個子菜單，當切換到無子菜單的其他路由時就需要將子菜單收起，這是設置openname變量this.openname = []，再在$nextTick中調用updateOpened方法發現根本不管用，網上搜羅各種資源也只有菜單的手動展開，如此只能自己動腦了，查看了組件源碼后發現個opened屬性，設置有子菜單的元素的opened為false：this.$refs.child1.$children[2].opened = false;

再在$nextTick中調用updateOpened方法

　　this.$nextTick(()=> {
　　　　this.$refs.child1.updateOpened();
　　});

完美解決
附上源碼

<template>
  <div class="hello">
        <div class="icondiv"></div>
        <Menu :active-name="selected" @on-select="menuselect" theme="light" ref="child" style="width:200px":open-names="openname" >
            <template  v-for="(item, index) in listdata"> 
                <template v-if="item.child&&item.child.length>0">
                    <Submenu :name="item.name">
                    <template slot="title">
                        <Icon :class="item.icon"></Icon>
                        {{item.name}}
                    </template>
                    <template v-for="sub in item.child">
                        <MenuItem :name="sub.href">{{sub.name}}</MenuItem>
                    </template>
                        </Submenu>
                </template>
                <template v-else>
                <MenuItem :name="item.href" >
                    <div :class="item.icon"></div>
                    <div class="layout-text">{{item.name}}</div>
                </MenuItem>
              </template>
            </template>
        </Menu>
  </div>
</template>
<script>
export default {
      name: 'menulist',
      data () {
        return {
            listdata:[
                {
                    'name':'公告',
                    'icon':['ixitong','cipp'],
                    'href':'#/menu1',
                },
                {
                    'name':'解惑',
                    'icon':['ianswer','cipp'],
                    'href':'#/menu2',
                },
                {
                    'name':'設置',
                    'icon':['im-extension','cipp'],
                    'child':[
                        {
                            'name':'審核',
                            'href':'#/submenu1',
                        },
                        {
                            'name':'托管',
                            'href':'#/submenu2',
                        },
                    ]
                }
            ],
            selected:"#/submenu1",
            openname:[],
        }
    },
      methods: {
            menuselect (a) {
                this.$router.push({path:a.split('#')[1]});
            },
        watchRoute(){
            if(this.$refs.child&&this.$route.name!="submenu1"&&this.$route.name!="submenu2"){
                this.openname = [];
                    this.$refs.child.$children[2].opened = false;
            }else{
                this.openname = ['設置'];
            }
            this.$nextTick(()=> {
                    this.$refs.child.updateOpened();
                });
        }
      },
      watch:{
            $route(){
                this.watchRoute();
            }
      },
      mounted(){
          this.watchRoute();
      }
}
</script>