Vue项目el-tree树形组件显示部门和部门下的人员

项目需求：树形加载各部门及所属员工，勾选员工，安排培训；部门下无员工的，不可勾选。

效果图：

后台返回数据源，举例：

实现逻辑：

    1.从数据源上看，部门是deptId和deptName，而员工是userID和userName。两者若想同时加载出来，需要统一化。

    2.递归该树形数据，将userName转为deptName

    3.递归中，判断是否有userId，没有则认为该部门下无员工，disadbled为true，设置不可勾选状态。

实现步骤：

    

html部分

    

data部分


js部分
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容