vue3无限级menu 导航的使用

最新推荐文章于 2025-03-13 16:58:13 发布

m0_59093019

最新推荐文章于 2025-03-13 16:58:13 发布

阅读量966

点赞数 2

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/m0_59093019/article/details/127703535

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要思路就是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-for="a in subitem.children"></cmenu>

       

         

         

        </el-sub-menu>



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

        <el-menu-item v-else :index="subitem.url" @click="changePage(subitem.url)">

          <el-icon>

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

          </el-icon>

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

        </el-menu-item>

       

   





  </template>



  <script>







  export default {

    name: '',

    data () {

      return {

        defaultPage: "",//为了让页面刷新后还是打开上一次的组件

       

       

      }

    },

    components:{

     

    },

  props:['subitem'],

    mounted () {

      //页面刷新后的加载组件 layout下的index.vue也有配置

      this.defaultPage = sessionStorage.getItem('path') || "/index/welcome";



      j:{

           console.log("213123123")

    console.log(this.subitem)

      }

   



    },

    methods: {



      a(){

        console.log("111111111111111111111111")

      },

      accept(subitem){

        this.subitem=subitem

      },

      alter(a){

  console.log(a)

      },

   

      handleOpen (key, keyPath) {

        // console.log(key, keyPath)

      },

      handleClose (key, keyPath) {

        // console.log(key, keyPath)

      },

      //导航跳转

      changePage2(path){

        this.defaultPage = path

        sessionStorage.setItem('path', path)

       this.$router.push(path)

      },

      changePage (path) {

        //点击了菜单按钮后，记录当前按钮的path值

        let t = path

        this.defaultPage = t

        sessionStorage.setItem('path', t)

      }

    }

  }

  </script>



  <style scoped>



  </style>

2调用menu组件的代码

2调用menu组件的代码

<template>

  <el-menu style="height:100%" class="el-menu-vertical-demo" active-text-color="#ffd04b" background-color="#304156"

    text-color="#fff" @open="handleOpen" @close="handleClose"  

    :default-active="defaultPage" router unique-opened

     :collapse="!$store.getters.siderType" :collapse-transition='false'>

     <!--遍历每个tree  list是一个tree集合-->

    <template v-for="subitem in list"  :key="subitem.id">

      <!--传入tree结构数据-->

      <cmenu   :subitem="subitem"        />

    </template>

  </el-menu>

数据结构是一个导航一个tree结构

一个list集合中包含许多tree

分别依次递归这个tree集合将单独的tree 传入menu组件执行