子组件递归调用时, 无需引入, 根据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>
//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>
// 备注：需要提前引入elementplus组件。可直接使用之前生成的框架（前九步即可）：链接地址。