后台菜单数据递归展示 效果示例图 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>
