方法一

import {menus} from './menus.ts'

function listToTree(list: any = [], options = {}, data = null) {
const { rootWhere, childsWhere, addChilds } = Object.assign(
{
rootWhere: (parent:any,self: any) => {
return self.parentId === 0
},
childsWhere: (parent: any, self: any) => {
return parent.id === self.parentId
},
addChilds: (parent: any, childList: any) => {
if (childList?.length > 0) {
parent['children'] = childList
}
}
},
options || {}
)
let tree = [] as any
// 空列表
if (!(list?.length > 0)) {
return tree
}
// 顶级
const rootList = list.filter((item: any) => rootWhere && rootWhere(data, item))
if (!(rootList?.length > 0)) {
return tree
}
tree = tree.concat(rootList)
// 子级
tree.forEach((root: any) => {
const rootChildList = list.filter((item: any) => childsWhere && childsWhere(root, item))
if (!(rootChildList?.length > 0)) {
return
}
rootChildList.forEach((item: any) => {
const childList = listToTree(list, { rootWhere: childsWhere, childsWhere, addChilds }, item)
addChilds && addChilds(item, childList)
})
addChilds && addChilds(root, rootChildList)
}) return tree
} const menuTree = listToTree(menus) // menuTree为最终想要的树形菜单数组

方法二

import {menus} from './menus.ts'

interface menuType {
id: string | number,
parentId: string | number,
children?: menuType[]
[key: string]: any
} // datas:后端传过来的菜单数组
// list:当前层级列表
const toTree = (datas: menuType[], list: menuType[]) => {
list.forEach((item: menuType) => {
const tmpMenu = { ...item }
const children = datas.filter((u: menuType) => u.parentId === tmpMenu.id)
if (children && children.length > 0) {
item.children = item.children || []
item.children.push(...children)
toTree(datas, children)
}
})
}
const menuTree = menus.filter(x => x.parentId === 0)
toTree(menus, menuTree) // 调用函数,向menuTree添加children,menuTree为最终想要的树形菜单数组

【注】需要 vue + element 渲染树形菜单的

请参考:https://blog.csdn.net/weixin_38422287/article/details/113999664

TS:菜单数组转树形,支持多级(递归)的更多相关文章

  1. Windows Azure Storage (22) Azure Storage如何支持多级目录

    <Windows Azure Platform 系列文章目录> 熟悉Azure平台的读者都知道,Azure Blob有三层架构.如下图:(注意blob.core.chinacloudapi ...

  2. ZIP解压缩文件的工具类【支持多级文件夹|全】

    ZIP解压缩文件的工具类[支持多级文件夹|全] 作者:Vashon 网上有非常多的加压缩演示样例代码.可是都仅仅是支持一级文件夹的操作.假设存在多级文件夹的话就不行了. 本解压缩工具类经过多次检查及重 ...

  3. 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..

    https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...

  4. ZIP解压缩文件的工具类【支持多级目录|全】

    ZIP解压缩文件的工具类[支持多级目录|全] 作者:Vashon 网上有很多的加压缩示例代码,但是都只是支持一级目录的操作,如果存在多级目录的话就不行了.本解压缩工具类经过多次检查及重构,最终分享给大 ...

  5. [转帖]Linux杂谈: 树形显示多级目录--tree

    Linux杂谈: 树形显示多级目录--tree https://www.cnblogs.com/tp1226/p/8456539.html tree -L 最近写博客的时候偶尔会需要将文件目录结构直观 ...

  6. TreeView树形控件递归绑定数据库里的数据

    TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...

  7. CodeIgniter 让控制器可以支持多级子目录的 Router 类库

    MY_Router.php 放到 system/application/libraries 目录下,就可以让 CI 的控制器支持多级子目录了.这样,你就可以在 system/application/c ...

  8. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建异步树形菜单

    jQuery EasyUI 树形菜单 - 创建异步树形菜单 为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据. 创建树形菜单(Tree) ...

  9. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建复杂树形网格

    jQuery EasyUI 树形菜单 - 创建复杂树形网格 树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格.本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共 ...

  10. 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建基础树形网格

    jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...

随机推荐

  1. BigDecimal类的基本使用

    概述 java在java.math包中提供的API类BigDecimal,用来对超过16位有效位的数进行精确的运算.双精度浮点型变量double可以处理16位有效数.在实际应用中,需要对更大或者更小的 ...

  2. Intel HDSLB 高性能四层负载均衡器 — 基本原理和部署配置

    前言 在上一篇<Intel HDSLB 高性能四层负载均衡器 - 快速入门和应用场景>中,我们着重介绍了 HDSLB(High Density Scalable Load Balancer ...

  3. WPF 不透明蒙板概述

    本文内容 先决条件 使用不透明蒙板创建视觉效果 创建不透明蒙板 将渐变用作不透明蒙板 显示另外 4 个 不透明蒙板能够使部分元素或视觉对象透明或部分透明. 要创建不透明蒙版,请将 Brush 应用于元 ...

  4. 不到200行用Vue实现类似Swiper.js的轮播组件

    前言 大家在开发过程中,或多或少都会用到轮播图之类的组件,PC和Mobile上使用 Swiper.js ,小程序上使用swiper组件等. 本文将详细讲解如何用Vue一步步实现的类似Swiper.js ...

  5. redis cluaster (redis分布式集群 redis分片集群)

    redis cluaster (redis分布式集群) 高可用: 在搭建集群时,会为每一个分片的主节点,对应一个从节点,实现slaveof的功能,同时当主节点down,实现类似于sentinel的自动 ...

  6. Android桌面Launcher源码浅析

    在Android启动过程-万字长文(Android14)中介绍了Android系统的启动过程,本篇文章将继续介绍桌面应用Launcher. 一.Launcher介绍 在Android启动过程-万字长文 ...

  7. 7.28考试总结(NOIP模拟26)[神炎皇·降雷皇·幻魔皇]

    或许只需一滴露水,便能守护这绽放的花朵. 前言 疯狂挂分,本来T2是想用树状数组优化一下的不知道为啥后来看了一下就少看了一层循环, 然后就想,我都 n 的复杂度了,足以搞过第一问了,还优化啥呀.... ...

  8. xv6 文件系统

    文件系统 公众号:Rand_cs 本文继续来看 x v 6 xv6 xv6 的文件系统部分, x v 6 xv6 xv6 将文件系统的设计分为 7 层: 磁 盘 → 缓 存 区 → 日 志 → i n ...

  9. Truncate的使用详解

    删除表中数据的方法有 delete 和 truncate, 其中TRUNCATE TABLE用于删除表中的所有行,而不记录单个行删除操作:TRUNCATE TABLE 与没有 WHERE 子句的 DE ...

  10. RestApi请求地址支持多路径访问

    RestApi请求地址支持多路径访问 @RestController@RequestMapping("/test") //单路径@RequestMapping(path = {&q ...