Ant Design Vue如何生成动态菜单a-menu
更新时间:2024年01月03日 14:44:37 作者:轻叹年华逝,
这篇文章主要介绍了Ant Design Vue如何生成动态菜单a-menu问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
今天,小编带你们看一看从官网总结来得动态菜单
一、定义template模板
<template> <a-layout> <!-- 左侧导航 --> <a-layout-sider> <div> <a-menu :inlineIndent="inlineIndent" 菜单缩进 :defaultSelectedKeys="[$route.path]" 默认选中的节点 :openKeys="openKeys" 展开的节点 mode="inline" 菜单模式 :inline-collapsed="collapsed" 折叠方式 @openChange="onOpenChange" @click="menuClick"> <!-- 菜单遍历的开始 --> <template v-for="item in menuList"> <!-- 如果当前遍历项没有children,视为子菜单项,注意所有的key都是path用于路由跳转,以及当前选中记录 --> <a-menu-item v-if="!item.children" :key="item.menu_url"> <i :class="item.menu_icon" style="font-size:18px;margin-right:5px"/> <span style="font-size: 15px;">{{ item.menu_name }}</span> </a-menu-item> <!-- 否则视为子菜单,传入菜单信息并且运用下面定义的函数式组件 --> <sub-menu v-else :key="item.menu_url" :menu-info="item" /> </template> </a-menu> </div> </a-layout-sider> <!-- 内容 --> <a-layout-content> <router-view></router-view> </a-layout-content> </a-layout> </template>
二、定义函数式组件
// 定义函数式组件 const SubMenu = { template: ` <a-sub-menu :key="menuInfo.menu_url" v-bind="$props" v-on="$listeners"> <span slot="title"> <i class="iconfont iconshezhiziduan" v-if="menuInfo.menu_name=='系统管理'" style="font-size:18px;margin-right:5px"/> <span style="font-size: 15px;">{{ menuInfo.menu_name }}</span> </span> <template v-for="item in menuInfo.children"> <a-menu-item v-if="!item.children" :key="item.menu_url"> <i :class="item.menu_icon" style="font-size:18px;margin-right:5px"/> <span style="font-size: 15px;">{{ item.menu_name }}</span> </a-menu-item> <sub-menu v-else :key="item.menu_url" :menu-info="item" /> </template> </a-sub-menu> `,
三、引入菜单组件及接受动态菜单数据
import { Menu } from 'ant-design-vue'; name: 'SubMenu', // true 此项必须被定义 isSubMenu: true, props: { // 解构a-sub-menu的属性,也就是文章开头提到的为什么使用函数式组件 ...Menu.SubMenu.props, // 接收父级传递过来的菜单信息 menuInfo: { type: Object, default: () => ({}), }, },
动态菜单数据格式如下:
// 菜单数据 menuList: [ { key:'1', title: '系统信息管理', path: '/system_infomation_manage', icon:'iconfont iconshezhiziduan', children: [ { key:'2', title: '项目信息管理', path: '/system_base/system_information', icon:'' }, { key:'3', title: '系统组织机构管理', path: '/system_base/institul_framework', icon:'' }, { key:'4', title: '系统人员管理', path: '/system_base/personnel_manage', icon:'' }, { key:'5', title: '系统权限管理', path: '/system_base/jurisdiction_manage', icon:'' }, { key:'6', title:'项目业务字典管理', path:'/system_dictionary_management', icon:'', children:[ { key:'6_1', title:'材料设备管理', path:'/dictionary_material_manage', icon:'', children:[ { key:'6_1_1', title:'材料管理', path:'/system_base/material_manage', icon:'', }, { key:'6_1_2', title:'机械设备管理', path:'/system_base/machine_manage', icon:'', } ] } ] } ] } ],
四、定义其他数据
// 菜单缩进 inlineIndent:12, // 默认不折叠 collapsed: false, // 全部父节点 rootSubmenuKeys: ['/system_infomation_manage'], openKeys: [],//默认展开的节点 defaultOpenKeys:['/system_infomation_manage'], // 选中的子菜单项 defaultSelectedKeys: [this.$route.path],
五、所涉及到的方法
methods:{ // 控制只打开一个 onOpenChange(openKeys) { // 将当前打开的父级菜单存入缓存中 window.localStorage.setItem('systemOpenKeys', JSON.stringify(openKeys)) const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1); if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) { this.openKeys = openKeys; } else { this.openKeys = latestOpenKey ? [latestOpenKey] : []; } }, // 点击菜单,路由跳转,注意的是当点击MenuItem才会触发此函数 menuClick({ item, key, keyPath }) { // 获取到当前的key,并且跳转 this.$router.push({ path: key }) }, }, created(){ // 将从缓存中取出openKeys const openKeys = window.localStorage.getItem('systemOpenKeys') if(openKeys){ // 存在即赋值 this.openKeys = JSON.parse(openKeys) }else{ this.openKeys = ['/system_infomation_manage'] } this.getSystemPermission() },
这样,一个完整的动态菜单就渲染出来了,最重要的一步就是定义函数式组件,这也是Vue和React框架的重要思想之一。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。这篇文章给大家介绍了VuePress搭建个人博客的过程,感兴趣的朋友一起看看吧2018-04-04vue filters和directives访问this的问题详解
这篇文章主要介绍了vue filters和directives访问this的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-01-01
最新评论