当前位置： 首页 > news >正文

vue递归树形结构删除不符合数据 生成一个新数组

news 2025/7/25 9:21:51

首先看一下数据结构（我的是路由菜单）

{
"code": 200,
"message": "请求成功!",
"success": true,
"data": [
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-21T06:03:55.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 1,
"menuName": "首页",
"menuLeaf": 1,
"menuParentId": null,
"menuParentName": null,
"menuPath": "/main",
"menuComponent": "/main",
"menuIcon": "iconfont icon-home",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-03-05T12:15:52.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 2,
"menuName": "权限管理",
"menuLeaf": 1,
"menuParentId": null,
"menuParentName": null,
"menuPath": "/power",
"menuComponent": "/",
"menuIcon": "iconfont iconjiaoseguanli",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": null,
"isDelete": null,
"children": [
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-23T03:14:03.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 7,
"menuName": "角色管理",
"menuLeaf": 2,
"menuParentId": 2,
"menuParentName": null,
"menuPath": "/power/role",
"menuComponent": "role/roleList",
"menuIcon": "iconfont iconjiaoseguanli",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "",
"isDelete": null,
"children": [
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-21T06:06:48.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 40,
"menuName": "新建",
"menuLeaf": 3,
"menuParentId": 7,
"menuParentName": null,
"menuPath": "addRole",
"menuComponent": "/",
"menuIcon": "el-icon-circle-plus-outline",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "default",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-15T07:23:13.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 41,
"menuName": "编辑",
"menuLeaf": 4,
"menuParentId": 7,
"menuParentName": null,
"menuPath": "updateRole",
"menuComponent": "/",
"menuIcon": "el-icon-edit",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": "info",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-22T06:39:46.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 42,
"menuName": "删除",
"menuLeaf": 3,
"menuParentId": 7,
"menuParentName": null,
"menuPath": "deleteRole",
"menuComponent": "/",
"menuIcon": "el-icon-delete\r\nel-icon-delete",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "danger",
"isDelete": null,
"children": []
}
]
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-03-02T02:50:46.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 8,
"menuName": "用户管理",
"menuLeaf": 2,
"menuParentId": 2,
"menuParentName": null,
"menuPath": "/power/user",
"menuComponent": "user/userList",
"menuIcon": "iconfont iconuser",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": null,
"isDelete": null,
"children": [
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-08T07:21:11.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 38,
"menuName": "新建",
"menuLeaf": 3,
"menuParentId": 8,
"menuParentName": null,
"menuPath": "addUserDialog",
"menuComponent": "/",
"menuIcon": "el-icon-circle-plus-outline",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": "default",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-08T07:23:18.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 39,
"menuName": "编辑",
"menuLeaf": 4,
"menuParentId": 8,
"menuParentName": null,
"menuPath": "updateUser",
"menuComponent": "/",
"menuIcon": "el-icon-edit",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": "primary",
"isDelete": null,
"children": []
}
]
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-03-15T05:28:57.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 9,
"menuName": "菜单管理",
"menuLeaf": 2,
"menuParentId": 2,
"menuParentName": null,
"menuPath": "/power/menu",
"menuComponent": "menu/menuList",
"menuIcon": "iconfont iconcaidanguanli",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": null,
"isDelete": null,
"children": [
{
"startDate": null,
"endDate": null,
"createTime": "2023-03-13T09:26:28.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 16,
"menuName": "新建",
"menuLeaf": 3,
"menuParentId": 9,
"menuParentName": null,
"menuPath": "addMenuOrButton",
"menuComponent": "/",
"menuIcon": "el-icon-circle-plus-outline",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "default",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-03-13T09:30:20.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 18,
"menuName": "删除",
"menuLeaf": 4,
"menuParentId": 9,
"menuParentName": null,
"menuPath": "deleteupdateMenuOrButton",
"menuComponent": "/",
"menuIcon": "el-icon-delete\r\nel-icon-delete",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "danger",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-03-27T08:48:02.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 19,
"menuName": "编辑",
"menuLeaf": 4,
"menuParentId": 9,
"menuParentName": null,
"menuPath": "updateMenuOrButton",
"menuComponent": "/",
"menuIcon": "el-icon-edit",
"menuHidden": 1,
"menuRemark": "",
"menuType": null,
"menuTypeName": null,
"menuColor": "info",
"isDelete": null,
"children": []
}
]
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-03T07:46:06.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 34,
"menuName": "部门管理",
"menuLeaf": 2,
"menuParentId": 2,
"menuParentName": null,
"menuPath": "/power/dept",
"menuComponent": "dept/deptList",
"menuIcon": "iconfont iconbumen",
"menuHidden": 1,
"menuRemark": "部门管理",
"menuType": null,
"menuTypeName": null,
"menuColor": null,
"isDelete": null,
"children": [
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-03T08:11:50.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 35,
"menuName": "新建",
"menuLeaf": 3,
"menuParentId": 34,
"menuParentName": null,
"menuPath": "addDept",
"menuComponent": "/",
"menuIcon": "el-icon-circle-plus-outline",
"menuHidden": 1,
"menuRemark": "部门新增按钮",
"menuType": null,
"menuTypeName": null,
"menuColor": "default",
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-03T08:13:16.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 36,
"menuName": "查询",
"menuLeaf": 3,
"menuParentId": 34,
"menuParentName": null,
"menuPath": "getDeptList",
"menuComponent": "/",
"menuIcon": "el-icon-search",
"menuHidden": 1,
"menuRemark": "部门管理查询按钮",
"menuType": null,
"menuTypeName": null,
"menuColor": "primary",
"isDelete": null,
"children": []
}
]
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-12-27T08:46:04.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 46,
"menuName": "岗位管理",
"menuLeaf": 2,
"menuParentId": 2,
"menuParentName": null,
"menuPath": "/power/post",
"menuComponent": "post/postList",
"menuIcon": "iconfont iconicon_gangwei",
"menuHidden": 1,
"menuRemark": "g岗位管理",
"menuType": null,
"menuTypeName": null,
"menuColor": null,
"isDelete": null,
"children": []
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-12-27T08:49:18.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 47,
"menuName": "职位管理",
"menuLeaf": 2,
"menuParentId": 2,
"menuParentName": null,
"menuPath": "/power/position",
"menuComponent": "position/positionList",
"menuIcon": "iconfont iconyingpinzhiwei",
"menuHidden": 1,
"menuRemark": null,
"menuType": null,
"menuTypeName": null,
"menuColor": null,
"isDelete": null,
"children": []
}
]
},
{
"startDate": null,
"endDate": null,
"createTime": "2023-11-21T06:45:20.000+00:00",
"updateTime": null,
"currentPage": null,
"pageSize": null,
"menuId": 33,
"menuName": "系统管理",
"menuLeaf": 1,
"menuParentId": null,
"menuParentName": null,
"menuPath": "/system/",
"menuComponent": "dept/deptList",
"menuIcon": "iconfont iconjiaoseguanli",
"menuHidden": 1,
"menuRemark": "系统管理",
"menuType": null,
"menuTypeName": null,
"menuColor": "",
"isDelete": null,
"children": []
}
],
"timestamp": 1753348298708,
"token": null,
"typeMsg": "success"

}

以上是我的数据结构,我的需求是只要菜单数据不要按钮数据，我是利用的递归进行删除按钮数据

上代码： 

  

handleMenu(data){for(let i=0;i<data.length;i++){if(data[i].menuLeaf==1 || data[i].menuLeaf==2){this.handleMenu(data[i].children)}else{data.splice(i,data.length)}}return data;
}

这一段代买就搞定了 主要是用 splice() 函数实现的，先说一下我的data.splice(i,data.length) 意思是说下标0开始到数组的长度 全部删除，注意：这种方法会改变原始数组，递归就不讲了很简单

说一下splice() 

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目

语法：

array.splice(index,len,item1,.....,itemX)

index: 必需，数组开始下标 （必须是数字）

len: 替换/删除的长度（必须是数字，但可以是 “0”；如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。）

item: 替换的值，删除操作的话 item为空
说明：
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

删除

//删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,1);
console.log(fruits); 
//["Banana", "Apple", "Mango"];

//删除起始下标为1，长度为2的一个值(len设置2)

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(1,2);
console.log(fruits); 
//["Banana", "Mango"];
http://www.dtcms.com/a/296410.html

相关文章：

  • HTTPS如何保障安全？详解证书体系与加密通信流程
  • AI 在金融：重塑金融服务的智能革命
  • 《小白学习产品经理》第十章：方法论之MVP
  • Windows 下配置 GPU 用于深度学习（PyTorch）的完整流程
  • 让复杂 AI 应用构建就像搭积木：Spring AI Alibaba Graph 使用指南与源码解读
  • 测试学习之——Pytest Day5
  • 关闭 Chrome 浏览器后，自动删除浏览历史记录
  • 3.7 综合挑战项目
  • C语言（长期更新）第5讲：数组练习（三）
  • 跑步有氧训练
  • MegaTTS3 使用
  • Elasticsearch 的聚合（Aggregations）操作详解
  • Mysql窗口函数
  • 数据库垂直拆分和水平拆分
  • 面经 - 车载多媒体系统
  • 【已解决】YOLO11模型转wts时报错:PytorchStreamReader failed reading zip archive
  • PyTorch数据选取与索引详解：从入门到高效实践
  • es 和 lucene 的区别
  • 【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
  • R study notes[1]
  • linux入门 相关linux系统操作命令（二）--文件管理系统 ubuntu22.04
  • 二分查找-153-寻找旋转排序数组中的最小值-力扣(LeetCode)
  • unordered_map和unordered_set特性以及解决哈希冲突
  • Gemini拿下IMO2025金牌的提示词解析
  • Redis Lua脚本语法详解
  • Redis ①⑦-分布式锁
  • 跨模态理解的基石：非文本内容向量化方法全景解析
  • Lua协同程序（coroutine）
  • leetcode100.相同的树（递归练习题）
  • Xilinx-FPGA-PCIe-XDMA 驱动内核兼容性问题修复方案