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

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

{
"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"];

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

网站公告

今日签到

热门文章

最新发布

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

网站公告

今日签到

热门文章

最新发布

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