个人技术分享

效果示例图

aslide.vue

<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>

aslideItem.vue

<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>