后台菜单数据递归展示
效果示例图 aslide.vue aslideItem.vue menu
<script setup>
import {
ref
} from 'vue';
const props = defineProps({
isCollapse: {
type: Boolean,
default: false
}
});
import AslideItem from "./aslideItem.vue"
const defaultActive = ref('1');
const menuList = ref([{
id: 1,
name: '地址管理',
path: '',
type: 'M',
icon: '',
children: [{
id: 2,
name: '地址列表',
path: '',
type: 'C',
icon: ''
}, {
id: 3,
name: '订单地址列表',
path: '',
type: 'C',
icon: ''
}, {
id: 4,
name: '商品地址管理',
path: '',
type: 'M',
icon: '',
children: [{
id: 5,
name: '商品地址列表',
path: '',
type: 'C',
icon: ''
}, {
id: 6,
name: '关联地址列表',
path: '',
type: 'C',
icon: ''
}, {
id: 9,
name: '数据管理',
path: '',
type: 'M',
icon: '',
children: [{
id: 10,
name: '数据列表',
path: '',
type: 'C',
icon: ''
}]
}]
}]
}, {
id: 7,
name: '系统列表',
path: '',
type: 'C',
icon: '',
}, {
id: 8,
name: '用户列表',
path: '',
type: 'C',
icon: '',
}, {
id: 11,
name: '订单管理',
path: '',
type: "M",
icon: '',
children: []
}])
//点击-目录菜单
const menuItemHandle = (row) => {
defaultActive.value = row.id;
}
</script>
<template>
<el-menu :default-active="defaultActive.toString()" class="el-menu-vertical-demo" :collapse="isCollapse">
<template v-for="item in menuList" :key="item.id">
<AslideItem :item="item" @clickEvent="menuItemHandle" />
</template>
</el-menu>
</template>
<style lang="scss" scoped>
</style>
<template>
<template v-if="item.children">
<el-sub-menu :index="item.id.toString()">
<template #title>
<el-icon>
<location />
</el-icon>
<span>{{item.name}}</span>
</template>
<template v-for="child in item.children" :key="child.id">
<AslideItem :item="child" @clickEvent="menuItemHandle" />
</template>
</el-sub-menu>
</template>
<template v-else>
<el-menu-item :index="item.id.toString()" @click="menuItemHandle(item)">
<el-icon>
<Setting />
</el-icon>
<template #title>{{item.name}}</template>
</el-menu-item>
</template>
</template>
<script>
export default {
name: 'AslideItem',
props: {
item: {
type: Object,
default: () => {
return {}
}
}
},
mounted() {
},
methods: {
menuItemHandle(row) {
this.$emit("clickEvent", row)
}
}
}
</script>
<style lang="scss" scoped>
</style>
menu
<el-menu class="el-menu-vertical-demo">
<el-sub-menu index="1">
<template #title>
<el-icon>
<location />
</el-icon>
<span>地址管理</span>
</template>
<el-menu-item index="1-1" @click="menuItemHandle('1-1')">
<el-icon>
<Memo />
</el-icon>
<span>地址列表</span>
</el-menu-item>
<el-menu-item index="1-2" @click="menuItemHandle('1-2')">
<el-icon>
<Memo />
</el-icon>
<span>订单地址列表</span>
</el-menu-item>
<el-sub-menu index="1-3">
<template #title>
<el-icon>
<Menu />
</el-icon>
<span>商品地址管理</span>
</template>
<el-menu-item index="1-3-1" @click="menuItemHandle('1-3-1')">
<el-icon>
<Memo />
</el-icon>
<span>商品地址列表</span>
</el-menu-item>
<el-menu-item index="1-3-2" @click="menuItemHandle('1-3-2')">
<el-icon>
<Memo />
</el-icon>
<span>关联地址列表</span>
</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2" @click="menuItemHandle('2')">
<el-icon>
<Setting />
</el-icon>
<template #title>系统管理</template>
</el-menu-item>
<el-menu-item index="3" @click="menuItemHandle('3')">
<el-icon>
<UserFilled />
</el-icon>
<template #title>用户管理</template>
</el-menu-item>
</el-menu>
