Vue2使用iview中menu菜单组件的大坑！

在使用iview的menu组件时，当需要发送请求获取菜单，动态渲染组件的时候，会出现设置默认展开菜单无效的bug。

官网给出的方法如下

官网给出的方法不够具体，如果在vue2中使用，是需要考虑生命周期的问题。

重点：动态渲染的menu组件并设置初始展开的菜单时一定要在created生命周期中使用，因为在这个生命周期中DOM被渲染了但并未挂载到页面中产生实例，所以是获取不到DOM的，所以在这个生命周期后才可以对默认展开菜单进行赋值，并在watch中声明使用nextTick方法，将已经被ref绑定的menu进行侦听更新。

注意：在发送请求时，它的回调也要直接写在created生命周期中，不能写在methods中，而且用了async和await也不行，我觉得这是ivew一个天大的bug。

完整代码

<template><div class="layout"><Layout><Header><Menu mode="horizontal" theme="dark" active-name="1"><div class="layout-logo"></div><div class="layout-nav"><MenuItem name="1" style="font-size: 20px"> 后台管理系统 </MenuItem></div><divstyle="font-size: 20px;text-align: right;color: #fff;padding-right: 30px;"><el-dropdown><iclass="el-icon-user"style="margin-right: 15px; color: #fff; cursor: pointer"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item><span>退出</span></el-dropdown-item></el-dropdown-menu></el-dropdown>{{username }}</div></Menu></Header><Layout><Sider hide-trigger :style="{ background: '#fff' }"><Menu:Ptheme="theme2":active-name="activeName":open-names="[openName]"width="auto"ref="sss"><MenuItem name="2-1" to=""><Icon type="ios-home-outline" />首页</MenuItem><Submenuv-for="(item, index) in navRouter":key="index":name="item.name"><template slot="title"><Icon :type="item.icon" />{{item.name }}</template><MenuItemid="select"v-for="(child, key) in item.children":key="key":to="child.path":name="child.name">{{child.name }}</MenuItem></Submenu></Menu></Sider><Layout :style="{ padding: '0 15px 15px' }"><Breadcrumb :style="{ margin: '10px 0' }"> </Breadcrumb><Content:style="{ Width: '100%', minHeight: '80vh', background: '#fff' }"><router-view></router-view></Content></Layout></Layout></Layout></div></template><script>import {getMenu } from "@/api/menuApi";export default {data() {return {theme2: "light",activeName: "", //打开的子标签openName: "", //打开的父标签名称username: "",navRouter: [],};},watch: {openName() {this.$nextTick(() => {//sss 是在menu组件绑定的this.$refs.sss.updateOpened();this.$refs.sss.updateActiveName();});},},async created() {//iview menu 动态渲染一定要在created这个声明周期中await getMenu().then((ret) => {//请求接口this.navRouter = ret.data;this.findOpenName(ret.data);});},methods: {findOpenName(data) {this.activeName = this.$route.name ? this.$route.name : "订单管理";data.forEach((element) => {element.children.forEach((item) => {if (item.name == this.activeName) {this.openName = element.name;}});});}, },};</script><style lang="sass" scoped>*text-decoration: none.ivu-layoutbackground: #eff2f5 !important.layoutwidth: 100%height: 100%.hwheight: 500pxwidth: 200px</style>