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 ...
随机推荐
- [渗透测试] HTB_Surveillance WriteUp [上]
靶机:Surveillance (from Hack The Box) 工具:Kali Linux 目标:拿到user和root的一串32位hex字符串 ## 配置hosts 环境启动后,要设置 ...
- 当面试官问出“Unsafe”类时,我就知道这场面试废了,祖坟都能给你问出来!
一.写在开头 依稀记得多年以前的一场面试中,面试官从Java并发编程问到了锁,从锁问到了原子性,从原子性问到了Atomic类库(对着JUC包进行了刨根问底),从Atomic问到了CAS算法,紧接着又有 ...
- .NET Framework 4.7.2下 Hangfire 的集成
参考资料: 开源的.NET定时任务组件Hangfire解析:https://www.cnblogs.com/pengze0902/p/6583119.html.Net Core 简单的Hangfire ...
- Android 12(S) MultiMedia Learning(三)MediaPlayer Native
上一篇MediaPlayer中看到实现一个最简单的播放器只需要5个接口,接下来会看看这些接口实现内容 /************************************************ ...
- 机器学习策略篇:详解可避免偏差(Avoidable bias)
可避免偏差 如果希望学习算法能在训练集上表现良好,但有时实际上并不想做得太好.得知道人类水平的表现是怎样的,可以确切告诉算法在训练集上的表现到底应该有多好,或者有多不好,让我说明是什么意思吧. 经常使 ...
- vsftp配置使用
vsftp简介: VSFTP是一个基于GPL发布的类Unix系统上使用的FTP服务器软件,它的全称是Very Secure FTP 从此名称可以看出来,编制者的初衷是代码的安全. 安全性是编写VSFT ...
- ReplayKit2:声音回调时间戳问题
一.ReplayKit2 框架回调中 视频.micphone声音.系统声音三路回调 - (void)processSampleBuffer:(CMSampleBufferRef)sampleBuffe ...
- 滴滴面试:谈谈你对Netty线程模型的理解?
Netty 线程模型是指 Netty 框架为了提供高性能.高并发的网络通信,而设计的管理和利用线程的策略和机制. Netty 线程模型被称为 Reactor(响应式)模型/模式,它是基于 NIO 多路 ...
- js 实现仿百度换肤效果
图片自行换掉即可查看效果,原理就是基于tab切换的效果实现的 效果图 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <met ...
- [Qt开发]当我们在开发兼容高分辨率和高缩放比、高DPI屏幕的软件时,我们在谈论什么。
前言 最近在开发有关高分辨率屏幕的软件,还是做了不少尝试的,当然我们也去网上查了不少资料,但是网上的资料也很零碎,说不明白,这样的话我就做个简单的总结,希望看到这的你可以一次解决你有关不同分辨率下的所 ...