vue+ant-design-vue实现导航菜单循环遍历 vue.jsmenu

demo地址：https://gitee.com/shjin/menu_...
1.创建vue项目

vue create menu_demo

【vue+ant-design-vue实现导航菜单循环遍历】2.安装ant-design-vue

yarn add ant-design-vue

3.main.js文件引入ant-design-vue

import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd);

4.菜单index.js

import Menu from "ant-design-vue/es/menu"; import Icon from "ant-design-vue/es/icon"; const { Item, SubMenu } = Menu; export default { name: "SMenu", props: { menu: { type: Array, required: true }, theme: { type: String, required: false, default: "light" }, mode: { type: String, required: false, default: "inline" }, collapsed: { type: Boolean, required: false, default: false }, }, data() { return { openKeys: [], cachedOpenKeys: [], selectedKeys:['user1'] }; }, computed: { rootSubmenuKeys: vm => { const keys = []; vm.menu.forEach(item => keys.push(item.path)); return keys; } }, mounted() { this.updateMenu(); }, watch: { collapsed(val) { if (val) { this.cachedOpenKeys = this.openKeys.concat(); this.openKeys = []; } else { this.openKeys = this.cachedOpenKeys; } }, $route: function() { this.updateMenu(); } }, methods: { // select menu item onOpenChange(openKeys) { // 在水平模式下时执行，并且不再执行后续 if (this.mode === "horizontal") { this.openKeys = openKeys; return; } // 非水平模式时 const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key)); if (!this.rootSubmenuKeys.includes(latestOpenKey)) { this.openKeys = openKeys; } else { this.openKeys = latestOpenKey ? [latestOpenKey] : []; } }, updateMenu() { const routes = this.$route.matched.concat(); const { hidden } = this.$route.meta; if (routes.length >= 3 && hidden) { routes.pop(); this.selectedKeys = [routes[routes.length - 1].path]; } else { this.selectedKeys = [routes.pop().path]; } const openKeys = []; if (this.mode === "inline") { routes.forEach(item => { openKeys.push(item.path); }); } //update-begin-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对 if (!this.selectedKeys || this.selectedKeys[0].indexOf(":") < 0) { this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys); } //update-end-author:taoyan date:20190510 for:online表单菜单点击展开的一级目录不对 },// render renderItem(menu) { if (!menu.hidden) { return menu.children && !menu.alwaysShow ? this.renderSubMenu(menu) : this.renderMenuItem(menu); } return null; }, renderMenuItem(menu) { let props = { to: { name: menu.name } }; const attrs = { target: menu.target }; return ( {this.renderIcon(menu.icon)} {menu.title} ); }, renderSubMenu(menu) { const itemArr = []; if (!menu.alwaysShow) { menu.children.forEach(item => itemArr.push(this.renderItem(item))); } return ({this.renderIcon(menu.icon)} {menu.title}{itemArr}); }, renderIcon(icon) { if (icon === "none" || icon === undefined) { return null; } const props = {}; typeof icon === "object" ? (props.component = icon) : (props.type = icon); return ; } }, render() { const { mode, theme, menu } = this; const props = { mode: mode, theme: theme, openKeys: this.openKeys }; const on = { select: obj => { this.selectedKeys = obj.selectedKeys; this.$emit("select", obj); }, openChange: this.onOpenChange }; const menuTree = menu.map(item => { if (item.hidden) { return null; } return this.renderItem(item); }); return ( {menuTree} ); } };

5.结合使用

.ant-layout-header { padding: 0; } #components-layout-demo-custom-trigger .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; }#components-layout-demo-custom-trigger .trigger:hover { color: #1890ff; }

6.效果图