文章目录
- 1. 组件
- 2 . 使用示例
1. 组件
src\components\menuTree\index.vue
<template>
<template v-for="item in menuList">
<!-- 分为两种方式渲染:有子菜单和没有子菜单-->
<!-- 没有子菜单-->
<el-menu-item :index="item.path" v-if="item.children.length == 0" :key="item.path"
@click="handleRouter(item)">
<el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px" height="18px" /></el-icon>
<span>{{ item.menuName }}</span>
</el-menu-item>
<el-sub-menu :index="item.path" v-if="item?.children?.length > 0" >
<template #title>
<el-icon v-if="item.icon"><svg-icon slot="prefix" :name="item.icon" width="18px" height="18px" /></el-icon>
<span @click="handleSubMenu($event, item)">{{ item.menuName }}</span>
</template>
<!-- 有子菜单的继续遍历(递归)-->
<MenuTree :menuList="item.children" ></MenuTree>
</el-sub-menu>
</template>
</template>
<script setup lang="ts" >
// 声明 props - 对象格式 在script 中不使用props拿不到数据, <template>中自动解构
const props = defineProps({
menuList: Array<any>
})
// 定义要触发的事件
const emit = defineEmits(['childEvent'])
// 切换路由
const handleRouter = (menu: any) => {
emit('childEvent', { type: 'menuItem', item: menu })
}
// 目录被点击
const handleSubMenu = (event: Event, menu: any) => {
let event1 = event.currentTarget
let event2 = event.target
if (event1 == event2) {
emit('childEvent', { type: 'subMenu', item: menu })
}
}
</script>
<script>
export default {
name: "MenuTree"
}
</script>
注1: 组件自递归要使用时要导出
注2: 这里使用的图标是之前自定义的图标组件
<script>
export default {
name: "MenuTree"
}
</script>
2 . 使用示例
在父组件中:
<MenuTree :menuList="menuList" @childEvent="handChildEvent"></MenuTree>
// 获取pinia的缓存的菜单数据, 这里数据来源根据自己实际来获取
const menuList = menuStore.menuList
// 子组件事件逻辑根据实际来定义
const handChildEvent = (data: any) => {
let menu = data.item
if (data.type == 'menuItem') {
// 向tabList中添加数据,检查是否已经添加 数据结构:{title:'首页',path:'/index'}
let hasNode = menuStore.tabList.filter((item: any) => item.path == menu.path)
if (hasNode == null || hasNode.length == 0) {
let data = { title: menu.menuName, path: menu.path, id: menu.id, menuName: menu.menuName, parentId: menu.parentId }
menuStore.setTabList(data)
}
// 修改activeTab的值
menuStore.setActive(menu.path)
// 缓存面包屑数据
menuStore.addBreadList(menu)
}
if (data.type == 'subMenu') {
menuStore.addBreadList(menu)
}
}