<template>
<el-menu :default-active="defaultPath" :collapse="props.isCollapse" router>
<template v-for="(item1, index1) in menus" :key="index1">
<!-- 一级菜单 -->
<el-sub-menu :index="item1.path" v-if="(item1.children || []).length">
<template #title>
<el-icon>
<component :is="item1.icon"></component>
</el-icon>
<span>{{item1.title}}</span>
</template>
<template v-for="(item2, index2) in (item1.children || [])" :key="index2">
<!-- 二级菜单 -->
<el-menu-item :index="item2.path">{{item2.title}}</el-menu-item>
</template>
</el-sub-menu>
<!-- 一级菜单 -->
<el-menu-item :index="item1.path" v-else>
<el-icon>
<component :is="item1.icon"></component>
</el-icon>
<template #title>{{item1.title}}</template>
</el-menu-item>
</template>
</el-menu>
</template>
<script setup>
import { defineProps, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { routes } from '@/router/routes'
const { getters } = useStore()
const hasPermission = computed(() => getters['login/hasPermission'])
const props = defineProps({
isCollapse: {
type: Boolean,
required: true
}
})
const getMenus = (base = '/', list = []) => {
return list.
filter(i => (i.meta || {}).isMenu === true).
map(i => {
if (i.meta && i.meta.permissions && !hasPermission.value(...i.meta.permissions)) {
return {}
}
let obj = {
path: base + i.path,
title: i.meta.title,
icon: i.meta.icon || 'Operation'
}
if (i.children && i.children.length) {
let children = getMenus(base + i.path + '/', i.children)
if (!children.length) {
return {}
}
obj.children = children
}
return obj
}).filter(i => i.path !== undefined)
}
const menus = getMenus((routes[0] || {}).path, (routes[0] || {}).children || [])
const route = useRoute()
const defaultPath = route.path ? route.path : ((menus[0] || {}).path || '')
</script>
<style lang="scss" scoped>
.el-menu {
border-right: none;
}
</style>
vue aside从router中获取label和name
于 2022-07-18 20:00:06 首次发布