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

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

news 2025/7/25 11:02:53

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

{
"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.xdnf.cn/news/1179631.html

相关文章：

  • 点击按钮滚动到底功能vue的v-on:scroll运用
  • 04.建造者模式的终极手册：从快餐定制到航天飞船的组装哲学
  • 期待更好的发展
  • 使用全局变量访问 Qt UI 组件的方法文档
  • 基于markdown封装的前端文档编辑工具，markdown.js的解析与应用
  • 开源Qwen凌晨暴击闭源Claude！刷新AI编程SOTA，支持1M上下文
  • SQL基础⑪ | 约束
  • 基于ABC与BP神经网络分类模型的特征选择方法研究(Python实现)
  • 制造业新突破：AR 培训系统助力复杂操作轻松上手​
  • Linux服务器安全自动化审计实战：一键扫描账户/网络/进程/计划任务风险（附开源脚本）
  • 数据库期中复习
  • 【Guava】1.1.我的报告
  • 进程调度的艺术：从概念本质到 Linux 内核实现
  • Windows 10 远程桌面(RDP)防暴力破解脚本
  • 用python自动标注word试题选项注意事项
  • 安全逆向工程学习路线
  • 4.1.2 XmlInclude 在 C# 中的作用及示例
  • 【Unity开发】数据存储——XML
  • web：js函数的prototype（原型对象）属性
  • Opentrons 模块化平台与AI技术助力智能移液创新，赋能AAW™自动化工作站
  • 电商项目_秒杀_架构升级
  • YOLOv4深度解析：革命性的实时目标检测技术
  • 报告研读——103页数据资产价值实现研究报告（ 2023）【附全文阅读】
  • 【ECharts✨】解决Vue 中 v-show 导致组件 ECharts 样式异常问题
  • PAT 甲级题目讲解：1003《Emergency》
  • Apache Commons：Java开发者的瑞士军刀
  • C语言第四章函数
  • Perf编译和使用
  • kettle插件-kettle数据挖掘ARFF插件
  • 2025年7月23日 AI 今日头条