ant-design-vue导航菜单a-menu的详细使用
ant-design-vue导航菜单a-menu的详细使用
- 一、效果
- 一、关键的API
- 二、注意事项
- 三、代码
此文章包含了递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题。
一、效果
可以看到递归生成三级菜单,刷新状态保留,只展开一个父级菜单等常见问题得以解决。
我自己的电脑设备老旧,反应缓慢的问题请忽略。
一、关键的API
说实话遇到问题了不知道该怎么解决,说白了还是不懂得API的使用,对相关的API不够了解,熟悉了API怎么操作都行。下面说说用到但是又容易混淆的API。
1.defaultSelectedKeys 默认选中的key
这里的key对应的是a-menu-item上面绑定的key,如果被选中,会进行导航的跳转以及被给予高亮状态。2.openKeys 展开的a-sub-menu的key
这里的key对应的是a-sub-menu上面绑定的key。如果绑定在a-menu上,对应的子菜单会打开。3.selectedKeys 受控选中的key
这里的key对应的是a-menu-item上面绑定的key,如果被选中,会进行导航的跳转以及被给予高亮状态。
与defaultSelectedKeys 有什么区别:
这两个属性为二选一使用,如果同时使用时,defaultSelectedKeys无效,将会以selectedKeys为准。
如果你只是希望指定一个初始化选中的菜单项,请使用defaultSelectedKeys;
如果你需要每次通过传入不同的props改变Menu组件的选中项,请使用selectedKeys。
二、注意事项
此处强调一点,如果是一级以及二级菜单的生成,普通的两层for循环结合递归以及v-if生成即可。如果是想使用a-menu生成三级或者三级以上的菜单,那么就需要定义在单文件内定义函数式组件。那为什么不推荐单文件的形式定义组件,而是使用函数式组件?以下是官方文档的说明:
三、代码
<template><a-layout id="components-layout-demo-custom-trigger" style="height:100%"><a-layout-sider theme="light" v-model="collapsed" :trigger="null" collapsible><div ><a-menu:inlineIndent="inlineIndent":defaultSelectedKeys="[$route.path]":openKeys="openKeys"mode="inline":inline-collapsed="collapsed"@openChange="onOpenChange"@click="menuClick"><!-- 菜单遍历的开始 --><template v-for="item in list"><!-- 如果当前遍历项没有children,视为子菜单项,注意所有的key都是path用于路由跳转,以及当前选中记录 --><a-menu-item v-if="!item.children" :key="item.path"><i :class="item.icon" /><span>{{ item.title }}</span></a-menu-item><!-- 否则视为子菜单,传入菜单信息并且运用下面定义的函数式组件 --><sub-menu v-else :key="item.path" :menu-info="item" /></template></a-menu></div></a-layout-sider><a-layout><a-layout-content :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"><router-view/></a-layout-content></a-layout></a-layout>
</template>
<script>
import { Menu } from 'ant-design-vue';
// 定义函数式组件
const SubMenu = {template: `<a-sub-menu :key="menuInfo.path" v-bind="$props" v-on="$listeners"><span slot="title"><i :class="menuInfo.icon" /><span>{{ menuInfo.title }}</span></span><template v-for="item in menuInfo.children"><a-menu-item v-if="!item.children" :key="item.path"><i :class="item.icon" /><span>{{ item.title }}</span></a-menu-item><sub-menu v-else :key="item.path" :menu-info="item" /></template></a-sub-menu>`,name: 'SubMenu',// must add isSubMenu: true 此项必须被定义isSubMenu: true,props: {// 解构a-sub-menu的属性,也就是文章开头提到的为什么使用函数式组件...Menu.SubMenu.props,// 接收父级传递过来的菜单信息menuInfo: {type: Object,default: () => ({}),},},
};
export default {data() {return {// 菜单缩进inlineIndent:12,// 默认不折叠collapsed: false,// 全部顶级父节点,用来控制所有父级菜单只展开其中的一项,可用遍历菜单信息进行赋值rootSubmenuKeys: ['/infomationManage','/safeInfoManage','/qualityInfoManage'],// 展开的父菜单项openKeys: [], // 选中的子菜单项defaultSelectedKeys: [this.$route.path], // 菜单信息,可从后台获取list: [{key: '1',title: '项目信息管理',path: '/infomationManage',icon:'iconfont icon-information'},{key: '2',title: '安全信息管理',path: '/safeInfoManage',icon:'iconfont icon-anquan',children: [{key: '2.1',title: '安全风险管理',path: '/safeRisk',icon:'',children: [{ key: '2.1.1',title: '风险分类管理',path: '/riskClassifyManage',icon:'',},{key: '2.1.2',title: '分类辨识',path: '/classifyIdentity',icon:'',}],},],},{key: '3',title: '质量信息管理',path: '/qualityInfoManage',icon:'iconfont icon-zhiliang',children:[{key: '3.1',title: '质量控制点管理',path: '/controlPointManage',icon:'',}]}],}},created(){// 将从缓存中取出openKeysconst openKeys = window.sessionStorage.getItem('openKeys')if(openKeys){// 存在即赋值this.openKeys = JSON.parse(openKeys)}},methods: {// 点击菜单,路由跳转,注意的是当点击MenuItem才会触发此函数menuClick({ item, key, keyPath }) {// 获取到当前的key,并且跳转this.$router.push({path: key})},onOpenChange(openKeys) {// 将当前打开的父级菜单存入缓存中window.sessionStorage.setItem('openKeys', 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] : [];}},},// 注册局部组件components: {'sub-menu': SubMenu,},
};
</script>
<style>
</style>
ant-design-vue导航菜单a-menu的详细使用相关推荐
- Ant Design Vue 切换中英文改变Menu和内容
前言,目前一个小项目使用的是Ant Design Vue,情况是 路由从接口获取并渲染到页面上,切换国际化语言时,Menu 和 内容 都中英文自动切换. Ant Design Vue 结构 Ant D ...
- Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题
问题:自定义菜单图标时收起菜单文字不隐藏问题 代码: <a-menu-item v-for="item in memberMenu" :key="item.path ...
- vue、Menu 导航菜单、Menu属性事件、vue Menu 全部导航菜单、vue Menu 全部属性事件
vue.Menu 导航菜单.Menu属性事件.vue Menu 全部导航菜单.vue Menu 全部属性事件 设计规则 何时使用 代码演示 顶部导航 内嵌菜单 缩起内嵌菜单 只展开当前父级菜单 垂直菜 ...
- Vue3:基础项目UI框架PC端(Element ui,view-ui-plus,Ant Design Vue)
1.Element ui 文档已经更新至Vue3,可以放心使用,在使用Element ui的时候注意在使用弹性布局的时候,Element ui中的Table 表格会出现缩放无法自适应问题. 安装 $ ...
- ant design vue pro 支持多页签模式 页签可以缓存
ant design vue pro 支持多页签模式 页签可以缓存 代码贴在最后 启动之后页面是这样的: 第一步:修改 src/layouts/BasicLayout.vue 文件,在该文件中添加mu ...
- ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
- ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
- 2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
- vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(2)
回顾 上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客 上篇文章搭建了vue3项目,引入了ant ...
- 【Vue3】创建 vite + vue3 + Ant Design Vue 项目
搭建脚手架 创建项目: 然后按照它的指示运行项目 配置文件 安装构建 vue-router: npm i vue-router@next 创建 router/index.js 文件: import { ...
最新文章
- ajax返回去掉引号,为什么我的服务器代码ajax调用返回一个用双引号括起来的响应?...
- IP协议详解之子网寻址、子网掩码、构造超网
- windows 7 网卡物理地址修改方法
- 生成msk文件的用处_Yotta企业云盘“小”功能大用处企业办公好伙伴
- css规则可以放在云上,CSS中!important规则的使用方法
- Vue2 彻底从 Flow 重构为 TypeScript,焕然一新!
- LeetCode 1176. 健身计划评估(滑动窗口)
- 计算机应用基础王秀娟,计算机应用基础课教学内容设计分析.doc
- dcs 管理计算机的功能,计算机控制系统 第三章 集散控制系统(DCS).doc
- 5.2.4 std::atomic:指针运算
- Mcafee(麦咖啡)8.5i 使用设置图解
- 步态识别技术与ReID技术
- 计算机如何理解图像?
- System.CommandLine选项Option
- [Linux]线程概念_线程控制(线程与进程的区别与联系 | 线程创建 | 线程等待 | 线程终止 | 线程分离 | LWP)
- numpy中,矩阵的三种转置transpose、getT、getH的区别
- 如何将照片格式转换jpg?
- 手把手使用Python教你破解谷歌(Google)人机验证码—上篇
- 免费DataGridView打印及.NET轻松打印控件(VB打印,C#打印)
- TFT-LCD移植记录
热门文章
- 腾讯云函数免费搭建onedrive网盘
- CSS选择器有哪几种?举例轻松理解CSS选择器
- Visal.B来袭,新近出现的恶意软件
- 编辑视频贴纸软件_微剪辑 - 视频编辑神器/专业剪辑软件 贴纸/字幕/音乐
- DataPipeline | 享物说产品负责人夏凯:数据驱动的用户增长实战
- 万物互联,该怎么联?
- VLC的windows版本下载
- 从“人、货、场”搭建数据指标体系,助力电商增长
- android 音频压缩 silk,微信音頻silk導出多個mp3,合並成一個mp3,壓縮大小
- 关于erf()与erfc()