因为后期业务是为了做路由权限 但是不知道后端数据是扁平化一股脑给我的还是分类做好的,索性就去特意找了一下

上代码

扁平化数据哈哈哈哈哈

const data =[
  {
    id:2,
    pid:0,
    path:'/course',
    name:'Course',
    title:'课程管理'
  },
  {
    id:3,
    name:'CourseOperate',
    path:'operate',
    link:'/course/operate',
    pid:2,
    title:'课程操作'
  },
  {
    id:4,
    name:'CourseInfo',
    path:'info_data',
    link:'/course/operate/info_data',
    pid:3,
    title:'课程数据'
  },
  {
    id:5,
    name:'CourseAdd',
    path:'add',
    link:'/course/add',
    pid:2,
    title:'添加课程'
  },
  {
    id:6,
    name:'Student',
    path:'/student',
    pid:0,
    title:'学生管理'
  },
   {
    id:7,
    name:'StudentOpearte',
    path:'operate',
    link:'/student/operate',
    pid:6,
    title:'学生操作'
  },
   {
    id:8,
    name:'StudentAdd',
    path:'add',
    link:'/student/add',
    pid:6,
    title:'添加学生'
  },
  
]

方法一

function formateDataTree (data){
  // 将父级数据和子集数据分开  利用过滤器进行过滤
  // 有pid为0 的说明自己是父级,不等于0的就说明是子集
  let parent = data.filter(p=>p.pid===0),
      children=data.filter(c=>c.pid !==0)
  console.log(parent,children);
  dataToTree(parent,children)
  console.log(parent);
  return parent
}
// parent和children都是数组 arr[]
function dataToTree(parent,children){
  // map映射找到每一个父级
  parent.map(p=>{
    // map映射找到每一个子级 i=index
    children.map((c,i)=>{
      // 如果子集的pid等于父级的id
      if (c.pid==p.id) {
          let _children=JSON.parse(JSON.stringify(children))
        
        // 每一次遍历所有的children 会每一次进行拷贝  递归前进行数据筛选
        _children.splice(i,1)
        // 递归   对c的id进行检测 ,注意要检测是数组 要放到数组中
        // 这里注意children是引用值 要进行深拷贝
        dataToTree([c],_children)
        // 判断父级有没有chuildren属性
        if (p.children) {
          // 有cuildren属性放进去
          p.children.push(c)
        }else{
          // 如果没有就创建一个新的名为children属性放入
          p.children=[c]
        }
      }
    })
  })
}

 方法二


// 树形结构化第二种方法  扁平化处理

function formateDataTree2(data){
  // 深拷贝一份
    let _data=JSON.parse(JSON.stringify(data))
    // return出去处理过的数据
    return _data.filter(p=>{
      // 对比过滤数组里pid和id相等的情况,如果有就放到_arr数组里
      // _arr就说chuildren数组
      const _arr=_data.filter(c=>c.pid===p.id);
      _arr.length && (p.children = _arr)
      return p.pid==0
    })
  }

 详细教学视频可以看这个 

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐