vue路由-两个树形结构数据-递归处理方法

最新推荐文章于 2024-04-16 11:32:02 发布
最新推荐文章于 2024-04-16 11:32:02 发布
阅读量902 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4561614/article/details/132902317
版权

1.vue静态路由

const dynamicRoutes = [
	{
		path: '/',
		name: '/',
		component: () => import('/@/layout/index.vue'),
		redirect: '/home',
		meta: {
			isKeepAlive: true,
		},
		children: [
			{
				path: '/home',
				name: 'home',
				component: () => import('/@/views/home/index.vue'),
				meta: {
					title: '首页',
					isLink: '',
					isHide: false,
					isKeepAlive: true,
					isAffix: true,
					isIframe: false,
					roles: ['admin', 'common'],
					icon: 'iconfont icon-shouye',
				},
			},
			{
				path: '/system',
				name: 'system',
				component: () => import('/@/layout/routerView/parent.vue'),
				redirect: '/system/sysApp',
				meta: {
					title: '配置',
					isLink: '',
					isHide: false,
					isKeepAlive: true,
					isAffix: false,
					isIframe: false,
					roles: ['admin'],
					icon: 'iconfont icon-shezhi',
				},
				children: [
					{
						path: '/system/sysApp',
						name: 'sysApp',
						component: () => import('/@/views/system/sysApp/index.vue'),
						meta: {
							title: '平台管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'iconfont icon-pingtai',
						},
					},
					{
						path: '/system/sysModule',
						name: 'sysModule',
						component: () => import('/@/views/system/sysModule/index.vue'),
						meta: {
							title: '菜单管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'iconfont icon-caidan',
						},
					},
					// {
					// 	path: '/system/menu',
					// 	name: 'menu',
					// 	component: () => import('/@/views/system/menu/index.vue'),
					// 	meta: {
					// 		title: '菜单管理2',
					// 		isLink: '',
					// 		isHide: false,
					// 		isKeepAlive: true,
					// 		isAffix: false,
					// 		isIframe: false,
					// 		roles: ['admin'],
					// 		icon: 'iconfont icon-caidan',
					// 	},
					// },
					{
						path: '/system/sysRole',
						name: 'sysRole',
						component: () => import('/@/views/system/sysRole/index.vue'),
						meta: {
							title: '角色管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'ele-ColdDrink',
						},
					},
					{
						path: '/system/sysCompany',
						name: 'sysCompany',
						component: () => import('/@/views/system/sysCompany/index.vue'),
						meta: {
							title: '公司管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'ele-SetUp',
						},
					},
					{
						path: '/system/sysUser',
						name: 'sysUser',
						component: () => import('/@/views/system/sysUser/index.vue'),
						meta: {
							title: '用户管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'iconfont icon-yonghu',
						},
					},
					
					{
						path: '/system/sysDictionary',
						name: 'sysDictionary',
						component: () => import('/@/views/system/sysDictionary/index.vue'),
						meta: {
							title: '字典管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'ele-SetUp',
						},
					},
					{
						path: '/system/sysGroups',
						name: 'sysGroups',
						component: () => import('/@/views/system/sysGroups/index.vue'),
						meta: {
							title: '群组管理',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'ele-SetUp',
						},
					},
					
				],
			},
			{
				path: '/basicInfo',
				name: 'basicInfo',
				component: () => import('/@/layout/routerView/parent.vue'),
				redirect: '/basicInfo/basegroup',
				meta: {
					title: '信息',
					isLink: '',
					isHide: false,
					isKeepAlive: true,
					isAffix: false,
					isIframe: false,
					roles: ['admin'],
					icon: 'iconfont icon-xitongshezhi',
				},
				children: [
					{
						path: '/basicInfo/basegroup',
						name: 'basegroup',
						component: () => import('/@/views/basicInfo/basegroup/index.vue'),
						meta: {
							title: '工作中心',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'iconfont icon-caidan',
						},
					},
					{
						path: '/basicInfo/baseperson',
						name: 'baseperson',
						component: () => import('/@/views/basicInfo/baseperson/index.vue'),
						meta: {
							title: '组织人员',
							isLink: '',
							isHide: false,
							isKeepAlive: true,
							isAffix: false,
							isIframe: false,
							roles: ['admin'],
							icon: 'iconfont icon-caidan',
						},
					},
				],
			},
		],
	},
];

2.后端路由

{
	"results": [
		{
			"id": 110,
			"moduleNo": "d53a5f36e8334a8ba3f077a6db05895c",
			"moduleName": "配置",
			"moduleEnName": "peizhi",
			"parentNo": "",
			"icon": "iconfont icon-shezhi",
			"url": "/system",
			"category": null,
			"target": null,
			"appNo": "b26af72992be48a3b9024e68e2e8054a",
			"creator": "3af9c1e11896443daff0e049edf07c29",
			"createName": "admin",
			"createTime": "2023-09-14 11:11:05",
			"updator": null,
			"updateName": null,
			"updateTime": null,
			"isDelete": false,
			"sort": 1,
			"routerName": "system",
			"childrenCount": 7,
			"hasChildren": true,
			"lstChildrenModule": [
				{
					"id": 120,
					"moduleNo": "73e6b2244b1b40cc8bf513506e8e284b",
					"moduleName": "字典管理",
					"moduleEnName": "zidianguanli",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "iconfont icon-anniu",
					"url": "/sysDictionary",
					"category": null,
					"target": null,
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "94e2e6aa44fc42afb22c164d8d5be430",
					"createName": "admin",
					"createTime": "2023-09-14 11:57:06",
					"updator": null,
					"updateName": null,
					"updateTime": null,
					"isDelete": false,
					"sort": 0,
					"routerName": "sysDictionary",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				},
				{
					"id": 111,
					"moduleNo": "4808e68aaff647609ef37e8759da21ea",
					"moduleName": "平台管理",
					"moduleEnName": "pingtaiguanli",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "iconfont icon-pingtai",
					"url": "/sysApp",
					"category": "",
					"target": "",
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "3af9c1e11896443daff0e049edf07c29",
					"createName": "admin",
					"createTime": "2023-09-14 11:16:16",
					"updator": null,
					"updateName": null,
					"updateTime": null,
					"isDelete": false,
					"sort": 1,
					"routerName": "sysApp",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				},
				{
					"id": 116,
					"moduleNo": "72e09c117beb4afeae3cf36aeae0fdab",
					"moduleName": "菜单管理",
					"moduleEnName": "caidanguanl",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "iconfont icon-caidan",
					"url": "/sysModule",
					"category": null,
					"target": null,
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "94e2e6aa44fc42afb22c164d8d5be430",
					"createName": "admin",
					"createTime": "2023-09-14 11:53:54",
					"updator": null,
					"updateName": null,
					"updateTime": null,
					"isDelete": false,
					"sort": 1,
					"routerName": "sysModule",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				},
				{
					"id": 117,
					"moduleNo": "cc1594e4156f4546957faec94a565857",
					"moduleName": "角色管理",
					"moduleEnName": "juseguanli",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "iconfont icon-juese",
					"url": "/sysRole",
					"category": null,
					"target": null,
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "94e2e6aa44fc42afb22c164d8d5be430",
					"createName": "admin",
					"createTime": "2023-09-14 11:55:01",
					"updator": null,
					"updateName": null,
					"updateTime": null,
					"isDelete": false,
					"sort": 1,
					"routerName": "sysRole",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				},
				{
					"id": 118,
					"moduleNo": "9b3ed039d79b4111a1dafbac59fc287f",
					"moduleName": "公司管理",
					"moduleEnName": "gongsiguanli",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "ele-ElemeFilled",
					"url": "/sysCompany",
					"category": null,
					"target": null,
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "94e2e6aa44fc42afb22c164d8d5be430",
					"createName": "admin",
					"createTime": "2023-09-14 11:56:00",
					"updator": null,
					"updateName": null,
					"updateTime": null,
					"isDelete": false,
					"sort": 1,
					"routerName": "sysCompany",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				},
				{
					"id": 119,
					"moduleNo": "e8489aa9a2c54c69b65a6a7ced6bb9e2",
					"moduleName": "用户管理",
					"moduleEnName": "yonghuguanli",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "iconfont icon-yonghu",
					"url": "/sysUser",
					"category": null,
					"target": null,
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "94e2e6aa44fc42afb22c164d8d5be430",
					"createName": "admin",
					"createTime": "2023-09-14 11:56:31",
					"updator": "94e2e6aa44fc42afb22c164d8d5be430",
					"updateName": "admin",
					"updateTime": "2023-09-14 14:54:19",
					"isDelete": false,
					"sort": 1,
					"routerName": "sysUser",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				},
				{
					"id": 121,
					"moduleNo": "8425aba782c840a19c64f9414736204a",
					"moduleName": "群组管理",
					"moduleEnName": "qunzhuguanli",
					"parentNo": "d53a5f36e8334a8ba3f077a6db05895c",
					"icon": "iconfont icon-bumenxiangqing",
					"url": "/sysGroups",
					"category": null,
					"target": null,
					"appNo": "b26af72992be48a3b9024e68e2e8054a",
					"creator": "94e2e6aa44fc42afb22c164d8d5be430",
					"createName": "admin",
					"createTime": "2023-09-14 11:57:38",
					"updator": null,
					"updateName": null,
					"updateTime": null,
					"isDelete": false,
					"sort": 1,
					"routerName": "sysGroups",
					"childrenCount": 0,
					"hasChildren": false,
					"lstChildrenModule": []
				}
			]
		},
		{
			"id": 114,
			"moduleNo": "1c027bf887a14b3eb1a0a680f721cf73",
			"moduleName": "信息",
			"moduleEnName": "xinxi",
			"parentNo": "",
			"icon": "iconfont icon-shujuzidian",
			"url": "/info",
			"category": null,
			"target": null,
			"appNo": "b26af72992be48a3b9024e68e2e8054a",
			"creator": "94e2e6aa44fc42afb22c164d8d5be430",
			"createName": "admin",
			"createTime": "2023-09-14 11:33:43",
			"updator": null,
			"updateName": null,
			"updateTime": null,
			"isDelete": false,
			"sort": 1,
			"routerName": "info",
			"childrenCount": 0,
			"hasChildren": false,
			"lstChildrenModule": []
		}
	],
	"pageModel": {
		"pageIndex": 1,
		"pageSize": 20,
		"totalCount": 0,
		"pageTotal": 0
	},
	"msg": null,
	"code": 0,
	"hasErr": false,
	"data": null,
	"expandSeconds": 0.0340284
}

3.递归方法处理静态路由为主

//后端返回的接口 res.results 的数据

let data= await  resetBackEndData(res.results,dynamicRoutes[0].children)

//重新处理的结果
console.log(data)

/**
 * @version ken 这里的方法是根据自己实际后端返回的数据进行二次整理,如果后端返回就是根据route.js 格式返回的就不需要调用此方法
 * @description 自定义二次方法 
 * @description 自定义二次方法 
 */
export  function resetBackEndData(apiMenus,localRoutes){
	//首页不需要加权限控制,如需要则首先情况list数组,同时
	const list = []
	localRoutes.filter(item => apiMenus.some(ele => {
		if (item.children && item.children.length) {
		const routeChild = resetBackEndData(ele.lstChildrenModule ?? [], item.children ?? [])
		if (routeChild.length) item.children = routeChild
		}
		// 筛选条件 
		if (item.name==ele.routerName) {
			//给路由赋值编号,可通过编号获取按钮权限
		   item.moduleNo=ele.moduleNo
		   list.push(item)
		}
	}));
	
	return list
}

黑色咖啡 Ken
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
帮我使用vue+elementui实现一个需求：1，页面左右布局，左侧为el-tree树形结构菜单，右侧为对应的子组件 2、每个子组件都可以有表单构成 3、每个子组件都有一个提交按钮，点击这个提交按
sunshineDD_DD的博客
04-11 1883
在这段代码中，我们创建了一个左右布局的界面，左侧使用了ElementUI的树形菜单组件(el-tree)，右侧根据用户的选择展示不同的组件。这里我们用到了Vue中的动态组件和组件注册方式。接下来，我们需要为每个子组件添加表单，并在点击提交按钮时获取数据并提交给后端。每个子组件中添加了一个formData对象来存储用户输入的数据。
基于iView和he-tree-vue的一个拖拽树形组件
12-16
"基于iView和he-tree-vue的一个拖拽树形组件"是这样的一个实用工具，它结合了两个流行的Vue.js库的功能，为开发者提供了一个强大且灵活的树形组件。这个组件不仅具备基本的树形展示能力，还包含了丰富的交互特性，如...
vue.js与element-ui实现菜单树形结构的解决方法
12-11
由于业务需要，要求实现树形菜单，且菜单数据由后台返回，在网上找了几篇文章，看下来总算有了解决办法。 场景：根据业务要求，需要实现活动的树形菜单，菜单数据由后台返回，最后的效果图如下： 后台返回的数据格式是这个样子的： data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID 　　　　　　　　　　　　　　isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', 　　　　　　　　　　　　　　isContent:false }, { pID:'m1', name:
Vue结合路由配置递归实现菜单栏
zxl_start的博客
01-21 2034
转载 https://www.cnblogs.com/HouJiao/p/13139901.html 完整代码在码云 在日常开发中，项目中的菜单栏都是已经实现好了的。如果需要添加新的菜单，只需要在路由配置中新增一条路由，就可以实现菜单的添加。 相信大家和我一样，有时候会跃跃欲试自己去实现一个菜单栏。那今天我就将自己实现的菜单栏的整个思路和代码分享给大家。 本篇文章重在总结和分享菜单栏的一个递归实现方式，代码的优化、菜单权限等不在本篇文章范围之内，在文中的相关部分也会做一些提示，有个别不推荐的写法希望大家不要
vue3之递归组件根据路由生成动态菜单
最新发布
qq_60272948的博客
04-16 980
目的：根据路由生成动态菜单。
从0开始搭建后台管理系统-02（Layout布局）（下篇）
grx1125的博客
08-19 383
书接上一回，我们说完了header部分的内容，如果没有看过的可以在其他文章中跳转。本篇介绍sideBar中的内容。
vue3 ---- 递归组件生成menu菜单 && 路由守卫鉴权
每天都要努力学习哦~~
06-05 3939
对于一些有规律的DOM结构，如果我们再一遍遍的编写同样的代码，显然代码是比较繁琐和不科学的，而且自己的工作量会大大增加，那么有没有一种方法来解决这个问题呢？答案是肯定的，我们可以通过方式来生成这个结构，当然在 Vue 模板中也是可以实现的，我们可以在 Vue 的组件中调用自己本身，这样就能达到目的。一个单文件组件可以通过它的文件名被其自己所引用。例如：名为FooBar.vue的组件可以在其模板中用引用它自己。
vue3递归组件---树形组件
忧郁的蛋的专栏
12-08 1845
第二种方式 就是像vue2 一样 export一个name出去。但是setup 语法糖下没办法使用 export。App.vue 里模拟树形数据，使用递归组件。我们只需要再定义一个script标签就可以了。要注意在树形组件的里层也得添加自定义事件。并且这个自定义事件传的函数很有讲究。type.ts 属性数据的结构。
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
热门推荐
Sabrina_cc的博客
12-03 1万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
Vue 路由使用方法详解：从基础到高级
m0_58013334的博客
08-19 2486
Vue 是一款流行的前端框架，它提供了强大的路由功能，用于构建单页应用程序（SPA）。Vue 路由能够帮助我们实现页面之间的无缝切换和导航，提升用户体验。本文将详细介绍 Vue 路由的使用方法，包括基础配置、路由参数传递、导航守卫等，帮助你充分发挥 Vue 路由的潜力。
vue-tree-list:tree树形结构的Vue组件
05-02
树结构的Vue组件。 支持添加treenode / leafnode，编辑节点名称并拖动。 安装 安装插件，然后您就可以全局使用该组件了。 import Vue from 'vue' import VueTreeList from 'vue-tree-list' Vue . use ( VueTreeList...
Vue结合路由配置递归实现菜单栏功能
10-15
主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细，对大家的学习火锅工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue 组件递归调用
07-03
vue组件递归调用，展示树状结构，
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
12-29
数据结构为数组中包含对象–树形结构，用Vue组件的写法实现以下的效果： 树形列表，缩进显示层级，第5级数据加底色，数据样式显色，点击展开折叠数据。本文为用Vue实现方式，另有一篇为用knockout.js的实现方法。 ...
vue3-router-tree:表示路由结构的树
05-29
Vue 3 路由器树此组件基于Vue.js 3 ，它将您的路由或项目表示为树视图，默认情况下将路由配置作为项目，但您可以提供遵循以下格式的自定义项目： [ { path : '/somePath' , //optional name : 'someName' , //...
VUE2.0——树形结构数据(递归组件)
HarryHY的博客
11-24 2635
父组件 newstree组件是一个循环递归的子组件 这里有一个itemChild是数据结构需要递归的数据 deep这个是递归的深度 ref是父组件触发子组件所用 我这里可能有不同的层级的子组件所以不是单一的所以是个动态的 <div class="replay_child"> <newstree :itemChild="item.child" v-if="ite
Vue中实现 将数组转换为树形结构的两种方法
qq_38210427的博客
06-13 1813
第二种:下载三方插件 使用arrayTotree插件 将扁平化数组转换为数组 并赋值给listdata中的自定义数组 = arrayToTree(获取请求的数组, { parentProperty: '父级id', customID: '二级id'})
vue-router + element-plus实现多层级路由的动态展示
m0_52744273的博客
12-05 5117
根据useRouter().getRoutes()获得的一维路由数组，动态生成分层级的路由菜单栏。
ant-design-vue table树形数据
08-20
对于 ant-design-vue 中的 table 组件展示树形数据，你可以按照以下步骤操作： 1. 首先，在你的 Vue 组件文件中引入 treeTable 组件： ```javascript import { Tree } from 'ant-design-vue'; ``` 2. 定义表格的列配置，包括树形节点的渲染方法： ```javascript const columns = [ { title: '名称', dataIndex: 'name', key: 'name', // 树形节点渲染方法 customRender: ({ text, record }) => { const hasChildren = record.children && record.children.length > 0; return hasChildren ? <a>{text}</a> : text; }, }, // 其他列配置... ]; ``` 3. 在 Vue 的 template 中使用 treeTable 组件，并传入数据和列配置： ```html <template> <a-table :columns="columns" :dataSource="data"> <template slot="name" slot-scope="text, record"> <!-- 树形节点渲染 --> <a v-if="record.children && record.children.length > 0" @click="toggleExpanded(record)"> {{ text }} </a> <span v-else>{{ text }}</span> </template> </a-table> </template> ``` 4. 在 Vue 的 methods 中定义展开/收起节点的方法： ```javascript methods: { toggleExpanded(record) { record.__expanded = !record.__expanded; }, }, ``` 注意：在展开和收起节点时，需要添加一个 `__expanded` 属性来记录节点的展开状态。你可以根据实际业务需求进行相关调整。 这样，你就可以在 ant-design-vue 的 table 组件中展示树形数据了。希望对你有所帮助！如有需要，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑色咖啡 Ken

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值