代码编织梦想

后台菜单数据递归展示

效果示例图

在这里插入图片描述

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>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_37117408/article/details/138910689

easyui树型菜单后台数据递归转换_li_2580的博客-爱代码爱编程

public class MenuDao extends JsonBaseDao{ /** * * @Title: menuList * @Description: 查询后台需要树形展示的菜单表数据 * 注意:该数据转换

vue 递归菜单树-爱代码爱编程

做一个后台管理系统, 很多时候是不会只有一两层这种定死的数据结构的, 往往,我们不知道它会有多少层数据, 这就需要我们来递归渲染, 而再react中我们递归个菜单就比较方便, 跟平时写递归函数差不多, 而在vue中,我们就需要递归组件了,那vue中问么递归组件呢, 其实就是依靠 组件中的name属性,这个name的值,就是当前组件自身, 举个例子,

js 无限级菜单(递归算法)-爱代码爱编程

  后台返回的数据结构 [ {"id":"111wqeqw","classifierName":"秋装11","level":"3","orderNumber":"1","parentId":"1qaz","custId":"f888ede2-edd2-487d-9760-e82a78aaea8e","path":"/root/1qaz/111wq

Vue通过递归实现多级菜单展示-爱代码爱编程

1、模拟后台返回的菜单JSON数据如下data.json文件 { "data": { "router": [ { "path": "", "name": "Home", "component": "Layout"

使用递归得到菜单树_体育界的扛霸子的博客-爱代码爱编程

 递归在我们平常的练习中经常会使用到,那么到底什么是递归呢? 递归: 它是指一段程序直接或者间接调用自身的一种方法,通过这种形式执行需要进行一些固定步骤的许多操作,它可以把一个复杂并且庞大的问题简单化,通过专注于解决它分化出来的小问题从而解决大问题,从而大大减少我们的代码量,是提高我们编码效率的很好方法。 递归的主要点: 1、递归函数的参数和返回值 2、

vue权限菜单递归函数_ifang_的博客-爱代码爱编程

路由权限 uid => 后端 API - 路由权限API 后端 => 用户对应路由权限列表 => 前端拿 JSON JSON => 前端转为 树形结构化 树形结构数据 => vue 静态路由 路由结构动态 => 静态路由 树形结构化的数据 => 菜单组件 // 权限菜单递归树

使用java递归实现菜单遍历-爱代码爱编程

建立实体类 import java.util.List; public class SysOrganization { private String Id; private String ParentId

java 菜单递归循环_java递归循环-爱代码爱编程

记录下项目中用到的 后台菜单递归循环的使用方法 结果数据展示 { "title": "常规管理", "icon": "fa fa-address-book", "href": "",