数组遍历区分父子级重排遍历多维数组
data(){
return{
datas:[
{eaId: "1", name: "系统管理", _parentId: "0", istype: "0", code: "system", page: "/", icon: "", zindex: "999",},
{eaId: "49", name: "25", _parentId: "1", istype: "0", code: "", page: "25", icon: null, zindex: null},
{eaId: "50", name: "11", _parentId: "1", istype: "0", code: "", page: "11", icon: null, zindex: null,},
{eaId: "2", name: "用户管理", _parentId: "1", istype: "0", code: "usermanage", page: "/user/userList", icon: "",},
{eaId: "3", name: "角色管理", _parentId: "1", istype: "0", code: "rolemanage", page: "/auth/roleManage", icon: "",},
{eaId: "4", name: "权限管理", _parentId: "1", istype: "0", code: "permmanage", page: "/auth/permList", icon: null,},
{eaId: "5", name: "CDN管理", _parentId: "0", istype: "0", code: "nginx", page: "/", icon: null, zindex: "300",},
{eaId: "13", name: "节点列表", _parentId: "5", istype: "0", code: "nginx", page: "/nginx/nodeList", icon: null,},
{eaId: "14", name: "站点管理", _parentId: "5", istype: "0", code: "nginx", page: "/nginx/nginxList", icon: null,},
{eaId: "15", name: "访问记录", _parentId: "5", istype: "0", code: "nginx", page: "/visitor/visitorList",},
{eaId: "17", name: "nginx统计", _parentId: "5", istype: "0", code: "nginx", page: "/statis/toNginxStatistic",},
{eaId: "18", name: "产品管理", _parentId: "5", istype: "0", code: "nginx", page: "/product/productList",},
{eaId: "19", name: "安全管理", _parentId: "5", istype: "0", code: "nginx", page: "/safe/safeManagement",},
{eaId: "20", name: "站点检测", _parentId: "5", istype: "0", code: "nginx", page: "/website/websiteDetection",},
{eaId: "21", name: "DNS管理", _parentId: "5", istype: "0", code: "nginx", page: "/dns/dnsManagement", icon: null,},
{eaId: "22", name: "节点更新", _parentId: "1", istype: "0", code: "nginx", page: "/sys/sysUpdate", icon: null,},
{eaId: "23", name: "版本更新", _parentId: "1", istype: "0", code: "nginx", page: "/version/versionManage",},
{eaId: "24", name: "操作日志", _parentId: "1", istype: "0", code: "system", page: "/sys/toOperateLog", icon: null,},
{eaId: "25", name: "转移记录", _parentId: "5", istype: "0", code: "nginx", page: "/transfer/transferList",},
{eaId: "27", name: "1101", _parentId: "0", istype: "0", code: "2113", page: "211", icon: null, zindex: "1131",},
{eaId: "29", name: "日志封禁记录", _parentId: "5", istype: "0", code: "nginx", page: "/logBan/logBanList",},
{eaId: "43", name: "22", _parentId: "27", istype: "0", code: "22", page: "22", icon: null, zindex: "22",},
{eaId: "44", name: "23", _parentId: "43", istype: "0", code: "23", page: "23", icon: null, zindex: "23",},
{eaId: "45", name: "24", _parentId: "44", istype: "0", code: "24", page: "24", icon: null, zindex: "24",},
{eaId: "47", name: "25", _parentId: "45", istype: "0", code: "", page: "25", icon: null, zindex: null},
{eaId: "48", name: "11", _parentId: "27", istype: "0", code: "", page: "11", icon: null, zindex: null,},
],
arr:[],
}
},
created(){
this.circleArray(this.datas)
},
methods:{
//遍历数组
circleArray(arr) {
// console.log('arr-----',arr)
// 1.根据id个pid建立两个去重数组
let pIds = new Set()
let ids = new Set()
// 2.遍历数组
for (let item of arr) {
item.children = []
pIds.add(item._parentId)
ids.add(item.eaId)
}
//3. 得到两个去重数组
pIds = Array.from(pIds)
ids = Array.from(ids)
// console.log('pIds',pIds)
// console.log('ids',ids)
//4.数组深拷贝得到新数组arr2 调用下面递归函数
let arr2 = this.deepCopy(arr)
//5.再次遍历数组并调用函数
for (let ele of arr) {
this.circleSleep(ele, arr, arr2, pIds)
}
},
// 递归函数 用于深拷贝
deepCopy(obj) {
let result = Array.isArray(obj) ? [] : {}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object') {
result[key] = this.deepCopy(obj[key]) // 递归复制
} else {
result[key] = obj[key]
}
}
}
return result
},
// 根据新得到的数组重排筛选数组
circleSleep(ele, arr, arr2, pIds) {
// 1.遍历arr2
for (let item of arr2) {
// 2.如果arr2的父级pid 等于 arr的id
if (item._parentId === ele.eaId) {
// 3.就把arr2的对象push到对应的arr.children[]中
ele.children.push(item)
// 4.根据对象的pid相同取出对应下标
let index3 = arr.findIndex(cur => {
return cur._parentId === item._parentId
})
// 5.再来判断pIds数组中是否包含这个元素
if (pIds.includes(item.eaId)) {
// 6.如果有则函数自调用
this.circleSleep(item, arr, arr2, pIds)
}
// 7.根据对应下边删除arr中的对象
arr.splice(index3, 1)
// console.log('33333333',arr)
this.arr=arr
}
}
},
}