后管系统-组织架构步骤分析

最新推荐文章于 2022-09-02 16:34:30 发布

Wusuki11

最新推荐文章于 2022-09-02 16:34:30 发布

阅读量396

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Wusuki11/article/details/125208997

版权

本文详细介绍了如何构建一个前端组织架构管理系统，包括数组转树形数据、添加删除功能、弹框处理、表单渲染、部门负责人信息获取、接口调用以及数据更新等关键步骤，主要使用Vue.js和JavaScript技术。

摘要由CSDN通过智能技术生成

1.实现数组转树

把后端传过来的平铺数组数据处理为tree组件需要的树形数据

1.1 在src/utils/index.js 文件中添加一个arrayToTree函数在里面建立映射关系并给每个元素补充children属性

映射关系: 目的是让我们能通过id快速找到对应的元素
补充children：让后边的计算更方便

list.forEach(item=>{
    item.children = []
    map[item.id] = item
  })
  // console.log('map',map)

1.2 对于每一个元素来说，先找它的上级

如果能找到，说明它有上级，则要把它添加到上级的children中去
如果找不到，说明它没有上级，直接添加到 treeList

 list.forEach(item=>{
    // 对于每一个元素来说，先找它的上级
    //    如果能找到，说明它有上级，则要把它添加到上级的children中去
    //    如果找不到，说明它没有上级，直接添加到 treeList
    const pid = item.pid
    const obj = map[pid]
    //如果存在则表示item 不是一级数据
    if(obj){
      obj.children.push(item)
    }else{
    //不存在对应的pid说明他有上级数据
      treeList.push(item)
    }
  })

1.3 使用工具函数处理数据在文件中引入arrayToTree 将请求回来的数据放入存入list</