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

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

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

{
"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.lryc.cn/news/598183.html

相关文章:

  • 基于深度学习的图像分类:使用MobileNet实现高效分类
  • 【SpringAI实战】提示词工程实现哄哄模拟器
  • MCNN-BiLSTM-Attention分类预测模型等!
  • 模型量化方式及分类
  • OpenAI最新大模型GPT-4o体验之Code Copilot AI编程大模型
  • 边缘智能体:轻量化部署与离线运行
  • 高可用架构模式——如何应对接口级的故障
  • node.js中的fs与path模块
  • Unity 多人游戏框架学习系列十
  • 贪心算法Day6学习心得
  • 苹果带火的3D高斯泼溅产品化玩法:一个成熟产品参考——以DJI Terra为例解析空间智能产品的商业化路径
  • ML3072 MQTT连接阿里云
  • 企业资产管理智能化:IT运维如何借力数字化管理提效避坑?
  • 计算机网络-- TCP 滑动窗口与拥塞控制
  • 亚马逊云科技:引领云计算新时代,开启无限可能
  • JavaSE:学习输入输出编写简单的程序
  • 【Unity开发】飞机大战项目实现总结
  • DigitalOcean 一键模型部署,新增支持百度开源大模型ERNIE 4.5 21B
  • Socket编程入门:从IP到端口全解析
  • element-plus 组件 ElMessage、ElLoading 弹框 和加载css 样式展示异常总结
  • SQL基础⑫ | 视图篇
  • 若用dnf下载的nginx和源文件下载的nginx冲突
  • 【学习路线】JavaScript全栈开发攻略:前端到后端的完整征程
  • Baumer工业相机堡盟工业相机如何通过YoloV8深度学习模型实现卫星图像识别(C#代码,UI界面版)
  • 20-ospf技术
  • Java Map.Entry 核心解析
  • IPSec VPN -- 野蛮模式
  • OSPF开放式最短路径优先
  • C# 泛型(泛型方法)
  • Python中常用标准库(时间库、随机库、正则表达式)