iview的menu组件垂直菜单有个自动展开属性open-names，可以指定一个数组，只要submenu子菜单组件的name属性的值在open-names数组之中，菜单组件渲染后，相应的子菜单就会被自动展开。

<template>
    <Row>
        <Col span="8">
            <Menu :theme="theme2" :open-names="['1','2','3']">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-paper" />
                        内容管理
                    </template>
                    <Submenu name="2">
                      <template slot="title">
                        <Icon type="ios-people" />
                        用户管理
                      </template>
                    
                      <MenuItem name="2-1">新增用户</MenuItem>
                      <MenuItem name="2-2">活跃用户</MenuItem>
                      <Submenu name="3">
                        <template slot="title">
                          <Icon type="ios-stats" />
                          统计分析
                        </template>
                        <MenuGroup title="使用">
                          <MenuItem name="3-1">新增和启动</MenuItem>
                          <MenuItem name="3-2">活跃分析</MenuItem>
                          <MenuItem name="3-3">时段分析</MenuItem>
                        </MenuGroup>
                        <MenuGroup title="留存">
                          <MenuItem name="3-4">用户留存</MenuItem>
                          <MenuItem name="3-5">流失用户</MenuItem>
                        </MenuGroup>
                      </Submenu>
                    </Submenu>
                    <MenuItem name="1-1">文章管理</MenuItem>
                    <MenuItem name="1-2">评论管理</MenuItem>
                    <MenuItem name="1-3">举报管理</MenuItem>
                </Submenu>
                
                
            </Menu>
        </Col>
        <Col span="8">
            
        </Col>
        <Col span="8">
            
        </Col>
    </Row>
</template>
<script>
    export default {
        data () {
            return {
                theme2: 'light'
            }
        }
    }
</script>

这个示例是iview官方文档的示例上稍作修改。在线运行这个示例

open-names数组中的子菜单都展开了。这是给静态数据的，但在实际情况中，open-names的值不一定能在menu渲染前就得到。将open-names的值延时设置一下。

//menu的open-names的值设置成data中的变量
<Menu :theme="theme2" :open-names="openItems">
...
//script的修改
<script>
    export default {
        data () {
            return {
                theme2: 'light',
                openItems:[]
            }
        },
        mounted(){
            //设置延时
            setTimeout(()=>{
                this.openItems=['1','2','3'];
            },2000);
        }
    }
</script>

修改后再次在线运行，可以看见菜单并没有因open-names属性的修改而同步展开，再看官方文档，在API中有这么一个方法。

有了这个方法，我们就可以让菜单组件重新渲染来展开子菜单了。修改相应代码。

<template>
  <Row>
      <Col span="8">
          <Menu :theme="theme2" ref="m1" :open-names="openItems">
              <Submenu name="1">
                  <template slot="title">
                      <Icon type="ios-paper" />
                      内容管理
                  </template>
                  <Submenu name="2">
                    <template slot="title">
                      <Icon type="ios-people" />
                      用户管理
                    </template>                   
                    <MenuItem name="2-1">新增用户</MenuItem>
                    <MenuItem name="2-2">活跃用户</MenuItem>
                    <Submenu name="3">
                      <template slot="title">
                        <Icon type="ios-stats" />
                        统计分析
                      </template>
                      <MenuGroup title="使用">
                        <MenuItem name="3-1">新增和启动</MenuItem>
                        <MenuItem name="3-2">活跃分析</MenuItem>
                        <MenuItem name="3-3">时段分析</MenuItem>
                      </MenuGroup>
                      <MenuGroup title="留存">
                        <MenuItem name="3-4">用户留存</MenuItem>
                        <MenuItem name="3-5">流失用户</MenuItem>
                      </MenuGroup>
                    </Submenu>
                  </Submenu>
                  <MenuItem name="1-1">文章管理</MenuItem>
                  <MenuItem name="1-2">评论管理</MenuItem>
                  <MenuItem name="1-3">举报管理</MenuItem>
              </Submenu>
          </Menu>
      </Col>
      <Col span="8">
          
      </Col>
      <Col span="8">
          
      </Col>
  </Row>
</template>
<script>
  export default {
      data () {
          return {
              theme2: 'light',
              openItems:[]
          }
      },
      mounted(){
        //设置延时
          setTimeout(()=>{
            
              this.openItems=['1','2','3'];
            //同理可以设置菜单选中项
            //下个时间点更新菜单
            this.$nextTick(()=>{
              this.$refs["m1"].updateOpened();
              //同理这里可以更新菜单选中项
            });
            
          },2000);
      }
  }
</script>

修改后，再次在线运行，这样就能看到展开的效果了。