vue3无限级menu 导航的使用

最新推荐文章于 2024-07-04 14:11:39 发布

m0_59093019

最新推荐文章于 2024-07-04 14:11:39 发布

阅读量855

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/m0_59093019/article/details/127703535

版权

本文介绍了如何在Vue3中创建无限级菜单导航。通过递归组件调用来实现，当tree有children时展示，无children时展示。数据结构是一个包含多个tree的list，递归遍历并传递给自定义的menu组件。

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

主要思路就是tree有children就执行 <el-menu-item>，没有children就执行<el-sub-menu>。

实现无限级menu核心思想就是组件子集调用自己

首先写好menu组件模板，将它注册为全局组件然后再menu组件<el-sub-menu>内调用知道tree没有children的时候调用<el-menu-item>结束递归

1组件代码

<template>

  <!--传入数据-->

  <!--tree有children 执行-->



        <el-sub-menu    v-if="subitem.children &&subitem.children.length>0" :index="subitem.id"      

          @click="changePage2(subitem.url)">

          <template #title  >

            <el-icon>

              <component :is="subitem.icon"></component>

            </el-icon>

            <span>{
  {subitem.label}}</span>

          </template>



  <!--tree的children还有children---->

        <!--自己调用自己 重复执行menu 直到没有children 执行menu-item-->

       

          <cmenu   :subitem="a"  v-fo