组织架构-树组件应用

树形组件-用层级结构展示信息，可展开或折叠。

属性设置

• data(绑定数据)
• props(设置属性)- children(设置子节点的字段名)/ label(设置显示内容的字段名)
• default-expand-all(默认展开所有节点)

组织架构-树组件自定义结构

显示右侧结构

节点结构设计

使用elementui的行和列结构

行

列

组织架构-节点作用域插槽

 组织架构-递归转化树形结构

/**
 * 列表型数据转化为数组结构
 */
export function transListToTreeData(list,rootValue) {
  const arr = [];
  list.forEach(item=>{
    if (item.pid==rootValue){
      //找到了匹配的节点
      arr.push(item)
      //当前节点的id和当前节点的子节点的pid是相等的
      const children = transListToTreeData(list,item.id)//找到当前节点的子节点
      item.children = children;//将子节点赋值给当前节点
    }
  })

}

组织架构-递归特点

• 一般来说是用来处理未知层级的数据
• 递归要有跳出条件
• 自身调用自身时参数不能重复

组织架构-添加子部门-新建弹层组件

1.注册事件

给每个选项添加command属性，方便我们定位到点击了那个菜单

2.封装组件

 3.控制显示