TS:菜单数组转树形,支持多级(递归)


方法一
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:菜单数组转树形,支持多级(递归)的更多相关文章
- Windows Azure Storage (22) Azure Storage如何支持多级目录
<Windows Azure Platform 系列文章目录> 熟悉Azure平台的读者都知道,Azure Blob有三层架构.如下图:(注意blob.core.chinacloudapi ...
- ZIP解压缩文件的工具类【支持多级文件夹|全】
ZIP解压缩文件的工具类[支持多级文件夹|全] 作者:Vashon 网上有非常多的加压缩演示样例代码.可是都仅仅是支持一级文件夹的操作.假设存在多级文件夹的话就不行了. 本解压缩工具类经过多次检查及重 ...
- 一款多功能的移动端滚动选择器,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等..
https://github.com/onlyhom/mobileSelect.js/blob/master/docs/README-CN.md mobileSelect.js 一款多功能的移动端滚动 ...
- ZIP解压缩文件的工具类【支持多级目录|全】
ZIP解压缩文件的工具类[支持多级目录|全] 作者:Vashon 网上有很多的加压缩示例代码,但是都只是支持一级目录的操作,如果存在多级目录的话就不行了.本解压缩工具类经过多次检查及重构,最终分享给大 ...
- [转帖]Linux杂谈: 树形显示多级目录--tree
Linux杂谈: 树形显示多级目录--tree https://www.cnblogs.com/tp1226/p/8456539.html tree -L 最近写博客的时候偶尔会需要将文件目录结构直观 ...
- TreeView树形控件递归绑定数据库里的数据
TreeView树形控件递归绑定数据库里的数据. 第一种:性能不好 第一步:数据库中查出来的表,字段名分别为UNAME(显示名称),DID(关联数据),UTYPE(类型) 第二步:前台代码 <% ...
- CodeIgniter 让控制器可以支持多级子目录的 Router 类库
MY_Router.php 放到 system/application/libraries 目录下,就可以让 CI 的控制器支持多级子目录了.这样,你就可以在 system/application/c ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建异步树形菜单
jQuery EasyUI 树形菜单 - 创建异步树形菜单 为了创建异步的树形菜单(Tree),每一个树节点必须要有一个 'id' 属性,这个将提交回服务器去检索子节点数据. 创建树形菜单(Tree) ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建复杂树形网格
jQuery EasyUI 树形菜单 - 创建复杂树形网格 树形网格(TreeGrid)可以展示有限空间上带有多列和复杂数据电子表格.本教程将演示如何将表格数据排列在分割的网格和多行表头中,以便组织共 ...
- 雷林鹏分享:jQuery EasyUI 树形菜单 - 创建基础树形网格
jQuery EasyUI 树形菜单 - 创建基础树形网格 树形网格(TreeGrid)组件从数据网格(DataGrid)继承,但是允许在行之间存在父/子节点关系.许多属性继承至数据网格(DataGr ...
随机推荐
- .net core的学习小结
课程:[.NET 6教程,.Net Core 2022视频教程,杨中科主讲] https://www.bilibili.com/video/BV1pK41137He/?p=159&share_ ...
- Swoole 源码分析之 Timer 定时器模块
原文首发链接:Swoole 源码分析之 Timer 定时器模块 大家好,我是码农先森. 引言 Swoole 中的毫秒精度的定时器.底层基于 epoll_wait 和 setitimer 实现,数据结构 ...
- GeneralUpdate .Net5 WPF、Winfrom、控制台应用自动更新组件
https://www.bilibili.com/video/BV1aX4y137dd/?vd_source=43d3e66cc2ad46bac54dfb0c6a3a0a23 GeneralUpdat ...
- Uni-app极速入门(一) - 第一个小程序
Uni-app 介绍 官网:https://www.dcloud.io/index.html uni-app是为js开发者提供的一个全端开发框架,可以开发一次编译为web.App.小程序(微信/阿里/ ...
- 如何在Windows上一键部署PaddleOCR的WebAPI服务
PaddleOCR旨在打造一套丰富.领先.且实用的OCR工具库,助力开发者训练出更好的模型,并应用落地. 官方开源项目地址:PaddlePaddle/PaddleOCR: Awesome multi ...
- RTOS官方文档学习
任务与协程 区别 一个程序可以只有任务.只有协程.二者都有,但不可以通过队列/信号量互相传递数据 任务特点 任务之间可以互相独立 每个任务分配自己的堆栈,提高了RAM使用率 操作简单.按优先级抢占式执 ...
- XML Web 服务技术解析:WSDL 与 SOAP 原理、应用案例一览
XML Web服务是一种用于在网络上发布.发现和使用应用程序组件的技术.它基于一系列标准和协议,如WSDL.SOAP.RDF和RSS.下面是一些相关的内容: WSDL(Web服务描述语言):用于描述W ...
- 一文带你理解透MyBatis源码
本文分享自华为云社区<一文彻底吃透MyBatis源码!!>,作者:冰 河. 写在前面 随着互联网的发展,越来越多的公司摒弃了Hibernate,而选择拥抱了MyBatis.而且,很多大厂在 ...
- Matlab打印运行进度
在运行matlab程序的过程中,有时候需要实时地掌握程序运行的进度,尤其对于一些耗时较长的循环操作,能够及时地输出运行进度,显得非常有必要. 打印进度条的实现方式就是不断地退格.输出. 退 ...
- #define 用法解法
宏的优点是能整理代码 缺点是宏替换来的代码需要人工解除宏后才能暴漏源代码 改底层时候是需要解一解的 它可以做到main函数中只有一个宏字母 这个宏定义时候,定义成了几个函数的源代码 所以main里面就 ...