一、效果

二、代码

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

controller层

/**

* 部门列表带用户列表树形结果

*

* @return 结果

*/

@ApiOperation(value = "部门列表带用户列表树形结果", notes = "XDRS")

@GetMapping("/listDeptUserTree")

public AjaxResult listDeptUserTree() {

return AjaxResult.success(deptService.findOrgUserTree(0L));

}

service层

/**

* 部门列表带用户列表树形结果

*

* @param pid

* @return 结果

*/

@Override

public List> findOrgUserTree(Long pid) {

// 查找根节点

List> list = deptMapper.findListByPid(pid);

List> children;

for (Map m : list) {

children = findOrgUserTree((Long) m.get("id"));

// 查询组织机构的子节点，并赋值给元素“children”

if (children != null && children.size() != 0) {

List> ss = sysUserMapper.findUserByOrgId((Long) m.get("id"));

if (ss != null && ss.size() != 0) {

children.addAll(ss);

}

m.put("children", children);

} else {

// 当根节点组织结构时，查询结构下面的员工，并赋值给根节点组织机构的children

children = sysUserMapper.findUserByOrgId((Long) m.get("id"));

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层

dept.xml

表结构

 

 user.xml

表结构

 后台查询的数组结果：  

[{

"children": [{

"id": 602,

"label": "销售部",

"isDisabled": true

}, {

"children": [{

"id": 1851,

"label": "张三"

}, {

"id": 1852,

"label": "李四"

}],

"id": 603,

"label": "产品部"

}, {

"children": [{

"id": 1854,

"label": "李小萌"

}],

"id": 611,

"label": "研发部"

}],

"id": 1,

"label": "帅帅集团有限公司"

}]

2.前端组件（vue-treeselect）

:options="options1"

:multiple="true"

v-model="value"

:value-consists-of="valueConsistsOf"

placeholder="选择成员"

/>

精彩文章

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。