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 ...
随机推荐
- java jdbc 得到像C#里的datatable一样的表格
public ArrayList<ArrayList<String>> getDataTale2(String sql) throws SQLException { Array ...
- jquery 给表格添加或删除一行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- TDSQL数据库考试实操题
第一题: 演练二 物理备份(5分) 答: 第二题:2. 演练一 请根据给定的演练方案,进行相关演练,并按如下要求提交截图 主备切换(5分) 答: 第三题:3. 演练一 请根据给定的演练方案,进行相关演 ...
- itest(爱测试) 4.5.2 发布,开源BUG 跟踪管理 & 敏捷测试管理软件
itest 简介 itest 开源敏捷测试管理,testOps 践行者,极简的任务管理,测试管理,缺陷管理,测试环境管理4合1,又有丰富的统计分析.可按测试包分配测试用例执行,也可建测试迭代(含任务, ...
- Windows Server 2016 离线安装.NET Framework 3.5
Windows Server 2016 离线安装.NET Framework 3.5 1.双击Windows Server 2016的ISO,会自动挂载,比如F盘. 2.右键开始菜单- 命令提示符(管 ...
- 实时数据同步Inofity、sersync、lsyncd
数据备份方案 企业网站和应用都得有完全的数据备份方案确保数据不丢失,通常企业有如下的数据备份方案 定时任务定期备份 需要周期性备份的数据可以分两类: 后台程序代码.运维配置文件修改,一般会定时任务执行 ...
- OceanBase 金融项目优化案例
领导让我帮忙支持下其他项目的SQL优化工作,呦西,是收集案例的好时机. 下面SQL都是在不能远程的情况下,按照原SQL的逻辑等价改写完成否发给现场同事验证. 案例一 慢SQL,4.32秒: SELEC ...
- BC5-牛牛学说话之-字符
题目描述 会说浮点数之后,牛牛开始尝试字符.输入一个字符,输出这个字符. 输入描述 输入一个字符,范围在 ascii 范围内 输出描述 输出这个字符 示例 1 输入:a 输出:a 解题思路 方案一 字 ...
- ObjectMapper Json字符串的转换处理
package com.example.demo; import com.example.pojo.User; import com.fasterxml.jackson.annotation.Json ...
- TXT文本文件存储
用解析器解析出数据之后,接下来就是存储数据了.保存的形式可以多种多样,最简单的形式是直接保存为文本文件,如 TXT.JSON.CSV 等.另外,还可以保存到数据库中,如关系型数据库 MySQL,非关系 ...