{"action":"created","issue":{"url":"https://api.github.com/repos/ElemeFE/element/issues/2490","repository_url":"https://api.github.com/repos/ElemeFE/element","labels_url":"https://api.github.com/repos/ElemeFE/element/issues/2490/labels{/name}","comments_url":"https://api.github.com/repos/ElemeFE/element/issues/2490/comments","events_url":"https://api.github.com/repos/ElemeFE/element/issues/2490/events","html_url":"https://github.com/ElemeFE/element/issues/2490","id":201485523,"number":2490,"title":"对于1.1.5版本的menu组件提个小小的建议","user":{"login":"Caijt","id":15088550,"avatar_url":"https://avatars.githubusercontent.com/u/15088550?v=3","gravatar_id":"","url":"https://api.github.com/users/Caijt","html_url":"https://github.com/Caijt","followers_url":"https://api.github.com/users/Caijt/followers","following_url":"https://api.github.com/users/Caijt/following{/other_user}","gists_url":"https://api.github.com/users/Caijt/gists{/gist_id}","starred_url":"https://api.github.com/users/Caijt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Caijt/subscriptions","organizations_url":"https://api.github.com/users/Caijt/orgs","repos_url":"https://api.github.com/users/Caijt/repos","events_url":"https://api.github.com/users/Caijt/events{/privacy}","received_events_url":"https://api.github.com/users/Caijt/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":6,"created_at":"2017-01-18T05:51:13Z","updated_at":"2017-01-18T07:33:22Z","closed_at":null,"body":"对于1.1.5版本menu组件更新后，还是达不到我的需求，最后通过修改组件原代码，再配合watch跟beforeRouteEnter达到我的需求。\r\n\r\n先说下我的需求\r\n![default](https://cloud.githubusercontent.com/assets/15088550/22051772/99da8380-dd80-11e6-942e-5980d9f266bd.png)\r\n1、主框架组件[admin.vue]：这里面我放了一个顶部主模块菜单menu组件，中间区域放了一个route-view主要用来放下面的menu_content.vue内容框架组件；\r\n2、内容框架组件[menu_content.vue]：我放一个左侧子菜单menu组件，这里的菜单数据是点击顶部主模块菜单后加载的，右边主区域放了一个route-view用来显示我的主内容；\r\n\r\n原理是这样的，点击顶部menu主模块菜单后，左侧menu的回钓函数beforeRouteEnter就会执行，我在这里根据所点模块菜单url加载相应的子菜单，然后替换掉左侧menu的菜单数组\r\n\r\n**我理想达到的是：**\r\n1、我点不同的主模块菜单后，切换不同的左侧菜单后，那些菜单要跟没点过一样，全部都是折叠的；\r\n2、我在任何地方按F5刷新后，那些menu组件的高亮链接还是对的\r\n3、我直接在URL输入链接后跳转后，menu组件的高亮还得是对的（如果高亮的链接在subMenu里面，那相应的subMenu也得自动打开）\r\n\r\n以上3点，都有不同程度无法实现的问题\r\n以上第2、3点，可以在watch里面对$route进行监听，注意必须得用setTimeout，不能用nextTick\r\n```\r\nwatch:{\r\n    '$route': {\r\n        immediate: true,\r\n        handler(r) {\r\n            //这里如果不用setTimeout，而用nextTick或直接this.menuIndex=r.path的话，如果菜单刚好在subMenu里面的，它不会自动展开\r\n            setTimeout(()=>{\r\n                //menuIndex是menu组件default-active的绑定值\r\n                this.menuIndex=r.path\r\n            },0)\r\n        }\r\n    }\r\n}\r\n```\r\n\r\n**对于第1点**，实在是没有办法，好像有缓存似的，左侧加载不同的子菜单后，再返回之前加载的，那些subMenu还是保持原来的展开状态，而且链接高亮状态还保持着\r\n那只能修改menu的原代码了\r\n1、为了解决menu总是缓存展开状态，我在menu组件里增加一个closeAllMenus方法\r\n```\r\nmethods: {\r\n    //折叠所有菜单组\r\n    closeAllMenus:function(){\r\n\tthis.openedMenus = [];\r\n    },\r\n    ......\r\n}\r\n```\r\n然后在我的menu_content.vue内容框架组件里的beforeRouteEnter里对menu组件执行closeAllMenus方法\r\n```\r\nnext(v=>{\r\n    //折叠所有菜单组，得先在el-menu上定义ref\r\n    v.$refs.menu.closeAllMenus()\r\n    //更换菜单数据\r\n    v.menus=menus\t\t\t\t\r\n})\r\n```\r\n这样就可以解决切换菜单时，总保持之前的展开状态的问题\r\n\r\n还有个问题，就是这个高亮的，左侧切换不同的模块菜单数据后，高亮总是保持在我之前点过的菜单上，一开始很奇怪，因为我都在watch中的$route中对menuIndex值动态修改了\r\n\r\n后面看了组件的代码才知道，我修改menuIndex后，组件还得检查一下这个index在menu中是否存在，不存在就return，不执行了，我觉得这样可能不太好，因为有时需要取消高亮也很正常，所以进行以下修改\r\n```\r\nwatch: {\r\n    defaultActive: function defaultActive(value) {\r\n        //注释掉原没找到菜单项目就停止执行\r\n        //var item = this.items[value];\t      \r\n        //if (!item) return; \t      \r\n        //this.activedIndex = item.index;\r\n\t      \r\n        //改成先将value设置成activedIndex，再检查这个菜单存不存在，不存在就return\r\n\tthis.activedIndex=value;\r\n        var item = this.items[value];\t      \r\n        if (!item) return; \t\r\n\tthis.initOpenedMenu();\r\n    }\r\n}\r\n```\r\n\r\n这样修改下来，已经完美地满足我的需求了，希望作者可以在下个版本中这样修改一下\r\n\r\n因为我还不太会用git，不懂怎么pull还是push代码，只能通过这种方式向你们建议下"},"comment":{"url":"https://api.github.com/repos/ElemeFE/element/issues/comments/273403998","html_url":"https://github.com/ElemeFE/element/issues/2490#issuecomment-273403998","issue_url":"https://api.github.com/repos/ElemeFE/element/issues/2490","id":273403998,"user":{"login":"Caijt","id":15088550,"avatar_url":"https://avatars.githubusercontent.com/u/15088550?v=3","gravatar_id":"","url":"https://api.github.com/users/Caijt","html_url":"https://github.com/Caijt","followers_url":"https://api.github.com/users/Caijt/followers","following_url":"https://api.github.com/users/Caijt/following{/other_user}","gists_url":"https://api.github.com/users/Caijt/gists{/gist_id}","starred_url":"https://api.github.com/users/Caijt/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Caijt/subscriptions","organizations_url":"https://api.github.com/users/Caijt/orgs","repos_url":"https://api.github.com/users/Caijt/repos","events_url":"https://api.github.com/users/Caijt/events{/privacy}","received_events_url":"https://api.github.com/users/Caijt/received_events","type":"User","site_admin":false},"created_at":"2017-01-18T07:33:22Z","updated_at":"2017-01-18T07:33:22Z","body":"@languanghao 你用我那个方法 setTimeout 里执行就可以自动展开了"}}
{"actor":{"display_login":"Caijt"}}