1. 效果图

 

2. 实现:   三级(部门或人员的树形选择)

3. 模拟数据说明:  fake.js

  

  name:  显示的名称(同时也是源码中 for 循环单一的key ,  如果真实数据存在名字有重复的情况, 建议加入ID字段作为主键)

  type:  department 为部门   human 为个人

  children: 数据类型必须为 数组,   type 为 human 个人时, 值为空数组 [],  为department 部门时   值为对象 或者为空数组

  以上4个键为必须, 最多三级嵌套

4. 源码 https://github.com/IceGogh/vue-components

 

5. 直接引入时, 将父组件的真实数据 通过props方式 传入  organization组件

  

  5.1.文件位置:

  components/OrganizationTree

 

  5.2. 引入

  import Organ from "@/components/OrganizationTree"

 

  5.3.调用

  <organization-tree dataList:"dataArray"></organization-tree>