使用 Vue 3+Element Plus+TypeScript 实现无限级动态菜单

子组件递归调用时, 无需引入, 根据name名称直接引用

// 父组件，如mainMenu.vue

<template>
 <el-menu>
   <child-menu :dataList="listData"></child-menu>
 </el-menu>
</template>
<script setup lang="ts">
import childMenu from './childMenu.vue'

const listData = [
 {
   name: '钠管设备',
   id: '1',
   level: 1,
   child: [
     {
       name: '系统默认组',
       id: '2',
       flag: true
     },
     {
       name: '设备一组',
       id: '3',
       child: [
         {
           name: '一组A小组',
           id: '4',
           child: [
             {
               name: '一组A小组的成员1',
               id: '5'
             },
             {
               name: '一组A小组的成员2',
               id: '6',
               child: [
                 {
                   name: '一组A小组的成员何总',
                   id: '7'
                 },
                 {
                   name: '一组A小组的成员曾',
                   id: '8'
                 },
                 {
                   name: '一组A小组的成员飘总',
                   id: '9'
                 }
               ]
             }
           ]
         },
         {
           name: '一组B小组',
           id: '10'
         }
       ]
     },
     {
       name: '设备二组',
       id: '11'
     }
   ]
 }
]
</script>
 复制
cf

//childMenu.vue 子组件

<template>
 <div class="menu-tree">
   <label v-for="list in dataList" :key="list.id">
     <el-sub-menu :index="list.id" v-if="list.child">
       <template #title>
         <i class="el-icon-location" v-if="list.level"></i>
         <span>{{ list.name }}</span>
       </template>
       <label>
         <child-menu :dataList="list.child"></child-menu>
       </label>
     </el-sub-menu>
     <el-menu-item v-else :index="list.name">
       <span>{{ list.name }}</span>
     </el-menu-item>
   </label>
 </div>
</template>
<script setup lang="ts">
defineProps<{
 dataList: Array<any>
}>()
</script>
 复制
cf

// 备注：需要提前引入elementplus组件。可直接使用之前生成的框架（前九步即可）：链接地址。