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

vue遞歸樹形結構刪除不符合數據生成一個新數組

相關文章

【機器學習之推薦算法】基于K最近鄰的協同過濾推薦與基于回歸模型的協同過濾推薦

望言OCR視頻字幕提取2025終極評測：免費版VS專業版提全方位對比(含免費下載)

Matplotlib（二）- Matplotlib簡單繪圖

【世紀龍科技】數字化技術解鎖新能源汽車電驅動總成裝調與檢修

springboot基于Java與MySQL庫的健身俱樂部管理系統設計與實現

如何修改debian的ip地址

haproxy七層代理（知識點+相關實驗部署）

【集合】JDK1.8 HashMap 底層數據結構深度解析

【element-ui】HTML引入本地文件出現font找不到/fonts/element-icons.woff

Windows|CUDA和cuDNN下載和安裝，默認安裝在C盤和不安裝在C盤的兩種方法

Vue 項目動態接口獲取翻譯數據實現方案（前端處理語言翻譯 vue-i18n）

Mybatis-plus多數據源

廣東省省考備考（第五十六天7.25）——常識：科技常識（聽課后強化訓練）

RabbitMQ簡述

skywalking應用性能監控

如何徹底清除服務器上的惡意軟件與后門

Linux和Windows基于V4L2和TCP的QT監控

yolo格式

Day 8-zhou R包批量安裝小補充！！!

電商項目_核心業務_數據歸檔

vue遞歸樹形結構刪除不符合數據 生成一個新數組

相關文章

vue遞歸樹形結構刪除不符合數據生成一個新數組