美文网首页
Vue项目el-tree树形组件显示部门和部门下的人员

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

作者: 晓妆初了明肌雪 | 来源:发表于2023-11-22 14:51 被阅读0次

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

    效果图

    后台返回数据源,举例

    实现逻辑

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

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

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

    实现步骤

        

    html部分

        

    data部分 js部分

    相关文章

      网友评论

          本文标题:Vue项目el-tree树形组件显示部门和部门下的人员

          本文链接:https://www.haomeiwen.com/subject/tuniwdtx.html