vue-Treeselect实现组织机构（员工）下拉树的功能

知识点：前端使用vuetree的组件库，调用后台查询组织机构，包括人员的接口

实现下拉树的功能

查考：

vue-treeselect官网：https://vue-treeselect.js.org/

源码demo下载链接：https://github.com/shuaishuaihand/orgvuetreedemo.git

（一）效果：

vue-Treeselect实现组织机构（员工）下拉树的功能

（二）代码

1.后台接口（递归算法）

controller层

/**
 * 查询组织结构下拉树
 * @return
 */
@RequestMapping(value = "/findOrgUserTree", method = { RequestMethod.GET, RequestMethod.POST })
@ResponseBody
public List<Map<String,Object>> findOrgUserTree() {
    return orgService.findOrgUserTree(0);
}

service层

/**
 * 递归查询组织机构-用户树节点
 * @return
 */
public List<Map<String, Object>> findOrgUserTree(int pid) {
    // 查找根节点
    List<Map<String, Object>> list = orgMapper.findListByPid(pid);
    List<Map<String, Object>> children;
    for (Map<String, Object>  m: list) {
        children = findOrgUserTree((int)m.get("id"));
        if (children != null && children.size() != 0) { //查询组织机构的子节点，并赋值给元素“children”
            m.put("children",children);
        } else {
            children = userMapper.findUserByOrgId((int)m.get("id")); //当根节点组织结构时，查询结构下面的员工，并赋值给根节点组织机构的children
            if (children != null && children.size() != 0) {
                m.put("children",children);
            }
//设置叶子组织机构（没有人员），为不可选 isDisabled为vuetree节点的属性，不能勾选
            if(children == null ||children.size() == 0){
                m.put("isDisabled",true);
            }
        }
    }
    return list;
}

mapper层
OrgMapper.xml:

<select >

User.xml:

<select 
}]

2.前端组件（vue-treeselect）

<body>   <!--:value-consists-of="valueConsistsOf"-->
<div >this.options1 = response.data;
                })
            }
        }
    })
</script>
</body>