数组遍历区分父子级重排遍历多维数组

数组遍历区分父子级重排遍历多维数组

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
        }
      }
    },
  }