antdesignVue递归导航菜单

Renners

已于 2022-07-29 09:20:36 修改

阅读量1.1k

点赞数

文章标签： javascript vue.js 前端

于 2022-07-28 10:57:16 首次发布

本文链接：https://blog.csdn.net/renners/article/details/126030265

版权

本文介绍如何手动创建一个基于Ant Design Vue的递归导航菜单。内容包括一个名为`leftNav.vue`的文件，该文件用于实现这一功能，并与官方版本进行对比。

摘要由CSDN通过智能技术生成

手写版本

文件leftNav.vue

<template>
<!-- 	  <a-switch
	      :checked="theme === 'dark'"
	      checked-children="Dark"
	      un-checked-children="Light"
	      @change="changeTheme"
	    /> -->

	<a-menu v-model:openKeys="openKeys" 
	   v-model:selectedKeys="selectedKeys" 
	     mode="inline"
	    :theme="theme"
		@click="handleClick">

		<template v-for="item in menuList">
			<a-sub-menu :key="item.id" @titleClick="titleClick" v-if="item.children">
				<template #icon>
					<component :is="$antIcons[item.icon]" />
				</template>
               
				<template #title>{
  {item.name + item.id}}</template>

				<template :key="sitem.id" v-for="