vue element递归菜单组件

lunaʚゞɞ

已于 2023-02-08 15:40:08 修改

阅读量303

点赞数

文章标签： vue.js javascript ecmascript

于 2023-02-03 14:52:07 首次发布

本文链接：https://blog.csdn.net/Noctis99/article/details/128866717

版权

文章介绍了在Vue3结合ElementPlus的环境下，如何进行路由拆分以及构建动态菜单组件。通过使用和等组件，配合v-for循环渲染菜单项，实现了根据路由信息动态生成多级菜单的功能。同时，利用import动态导入组件以优化代码结构。

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

思路：路由拆分

将路由信息整合在一起

拆分菜单组件

  <el-menu  class="el-menu-vertical-demo" router @select="sec"  :collapse="false">
 <menuItem v-for="items in menus" :item="items" :key="items.path"></menuItem>
</el-menu>

import menuItem from '../components/me.vue'

<!--  -->
<template>
<div id="side-bar-item">
    <el-submenu v-if="item.children&&item.children.length  > 0" :index="item.path" :key="item.path">
        <template slot="title">
            <i :class="item.icon"/>
            <span slot="title">{{item.meta.title}}</span>
        </template>
        <div v-if="item.children&& item.children.length  > 0">
            <meunItem v-for="(innerMenu,index) in item.children" :item="innerMenu" :key="index"/>
        </div>
    </el-submenu>
    <el-menu-item v-else :index="item.path" :key="item.path">
        <i :class="item.icon"/>
        <span slot="title">{{item.meta.title}}</span>
    </el-menu-item>
</div>
</template>

<script>
import meunItem from '../components/me.vue'
export default {
  props:['item'],
  components: {
    meunItem: () => import('../components/me.vue'),
  },
}

</script>
<style  scoped>
</style>

vue3+elementPlus

  <el-menu
    class="el-menu-vertical-demo"
    :collapse="false"
  >
   <meunItem v-for="items in menulistI" :item="items" :key="items.path"></meunItem>
  </el-menu>
import meunItem from '../components/me.vue'
import {  Location } from '@element-plus/icons-vue'

const menulistI=reactive( [
    {
      path: 'userManage',
      icon: Location,
      meta:{ title:'用户管理'},
      children: [
            {
              path: 'orderManages',
      icon: Location,
      meta:{ title:'用户管理'},
      children:[ {
              path: 'orderManages',
      icon: Location,
      meta:{ title:'用户管理'},

            }]
            }
        ]
    },
    {
      path: 'orderManage',
      icon: Location,
      meta:{ title:'用户管理'},

    },
])

<template>
<div>
    <el-sub-menu  v-if="item.children&&item.children.length  > 0" :index="item.path" :key="item.path">
        <template #title>
      <component :is="item.icon"></component>    
            <span>{{item.meta.title}}</span>
        </template>
        <div v-if="item.children&& item.children.length  > 0">
            <meunItem v-for="(innerMenu,index) in item.children" :item="innerMenu" :key="index"/>
        </div>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path" :key="item">
        <component :is="item.icon"></component>  
      <template #title>{{item.meta.title}}</template>
    </el-menu-item>

</div>
</template>

<script setup lang='ts'>
import {
  Location,
} from '@element-plus/icons-vue'
import meunItem from '../components/me.vue'
 defineProps({
    item: {
        type: Object,
        default:[]
    }
}

</script>

<style  scoped>
svg{
    width: 25px;
}
</style>