vue实现下拉树带（人员）

笑对人生-

已于 2022-11-09 16:46:26 修改

阅读量1.3k

点赞数

分类专栏： JAVA 文章标签： vue.js spring cloud

于 2022-11-09 16:41:38 首次发布

本文链接：https://blog.csdn.net/qq_32431981/article/details/127772193

版权

JAVA 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了一个使用递归算法实现的后台接口，该接口返回部门及用户列表的树形结构数据。前端利用vue-treeselect组件展示这个数据，实现了选择成员的功能。在服务端，通过deptMapper和sysUserMapper查询部门和用户，动态构建树形结构，并处理叶子节点的禁用状态。在前端，利用axios获取数据并填充到vue-treeselect组件中。

摘要由CSDN通过智能技术生成

一、效果

二、代码

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<Map<String, Object>> findOrgUserTree(Long pid) {
        // 查找根节点
        List<Map<String, Object>> list = deptMapper.findListByPid(pid);
        List<Map<String, Object>> children;
        for (Map<String, Object> m : list) {
            children = findOrgUserTree((Long) m.get("id"));
            // 查询组织机构的子节点，并赋值给元素“children”
            if (children != null && children.size() != 0) {
                List<Map<String, Object>> 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

     <!-- 根据父ID查询，返回MAP数据结构 -->
    <select id="findListByPid" resultType="java.util.Map" parameterType="java.lang.Long">
        SELECT
            dept_id AS id,
            dept_name AS label
        FROM
            sys_dept
        WHERE
            parent_id = #{parentId}
            AND del_flag = '0'
    </select>

表结构

user.xml

     <!-- 根据部门查询人，返回MAP数据结构 -->
    <select id="findUserByOrgId" resultType="java.util.Map">
        SELECT
            user_id AS id,
            nick_name AS label
        FROM
            sys_user
        WHERE
            dept_id = #{deptId}
            AND del_flag = '0'
            AND `STATUS` = '0'
            AND login_type ='2'
        ORDER BY
            user_id ASC
    </select>

表结构

后台查询的数组结果：

[{
    "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）

<body>
<div id="app">
        <treeselect  
            :options="options1" 
            :multiple="true"  
            v-model="value" 
            :value-consists-of="valueConsistsOf"
            placeholder="选择成员"
        />
 
</div>
<script>
    // register the component
    Vue.component('treeselect', VueTreeselect.Treeselect)
    new Vue({
        el: '#app',
        data: {
            // define default value
            value: null,
            valueConsistsOf: 'LEAF_PRIORITY',
            // define options
            options1: "",
        },
        //初始化方法
        mounted:function () {
            this.findZNodes();
 
        },
        methods: {
            //加载修改树结构json
            findZNodes: function () {
                this.$http.post("/org/findOrgUserTree").then(function (response) {
                    this.options1 = response.data;
                })
            }
        }
    })
</script>
</body>