Ant Design Vue生成动态菜单a-menu

今天,小编带你们看一看从官网总结来得动态菜单

  • 一、定义template模板
  • 二、定义函数式组件
  • 三、引入菜单组件及接受动态菜单数据
  • 四、定义其他数据
  • 五、所涉及到的方法

一、定义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">
                        
                        <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: `
    
        
          
          {
      { menuInfo.menu_name }}
        
        
    
    `,

三、引入菜单组件及接受动态菜单数据

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框架的重要思想之一。

你可能感兴趣的:(ant,design,vue,vue,vue)