vue+element ui树形下拉搜索组件

1、前台组件页

2、在模块中引用组件使用

3、后台方法返回数据示例

 

 4、后台方法实现类

查出科室信息，将list转换为树形结构数据的JSONArray

/**
     * 获取科室信息树形结构数据
     *
     * @param map
     * @return
     */
    @Override
    public JSONArray getKsxxListForTree(Map map) {
        List>  ssxylistall = new ArrayList<>();
        List>  kslist = ksglmapper.getKsxxList(map);
        for (int i = 0; i < kslist.size(); i++) {
            Map temp= new HashMap<>();
            temp.put("id",kslist.get(i).get("SSXY"));
            temp.put("name",kslist.get(i).get("SSXY_NAME"));
            temp.put("parentId","0");
            temp.put("rank",Integer.parseInt(kslist.get(i).get("DEPT_SORT").toString()));
            temp.put("value",kslist.get(i).get("SSXY"));
            temp.put("label",kslist.get(i).get("SSXY_NAME"));
            ssxylistall.add(temp);
            String sssjks = PtpUtils.objToString(kslist.get(i).get("SSSJKS"));
            if("".equals(sssjks)){
                kslist.get(i).put("parentId",kslist.get(i).get("SSXY"));
            } else {
                kslist.get(i).put("parentId",sssjks);
            }
            kslist.get(i).put("value",kslist.get(i).get("RESOURCE_ID"));
            kslist.get(i).put("label",kslist.get(i).get("NAME"));
            kslist.get(i).put("name",kslist.get(i).get("NAME"));
        }
        //去重
        Set> middleHashSet = new HashSet>(ssxylistall);
        //去重之后的学院信息集合
        List> ssxylist = new ArrayList>(middleHashSet);
        //将学院作为科室信息放入科室list
        for (int i = 0; i < ssxylist.size(); i++) {
            kslist.add(ssxylist.get(i));
        }
        JSONArray result = listToTree(JSONArray.parseArray(JSON.toJSONString(kslist)),"id","parentId","children");
        return result;
    }


public static JSONArray listToTree(JSONArray arr, String id, String pid, String child) {
        JSONArray r = new JSONArray();
        JSONObject hash = new JSONObject();
        //将数组转为Object的形式，key为数组中的id
        for (int i = 0; i < arr.size(); i++) {
            JSONObject json = (JSONObject) arr.get(i);
            hash.put(json.getString(id), json);
        }
        //遍历结果集
        for (int j = 0; j < arr.size(); j++) {
            //单条记录
            JSONObject aVal = (JSONObject) arr.get(j);
            //在hash中取出key为单条记录中pid的值
            String pidStr = "";
            Object pidObj = aVal.get(pid);
            if (aVal.get(pid) != null) {
                pidStr = aVal.get(pid).toString();
            }
            JSONObject hashVP = (JSONObject) hash.get(pidStr);
            //如果记录的pid存在，则说明它有父节点，将她添加到孩子节点的集合中
            if (hashVP != null) {
                //检查是否有child属性
                if (hashVP.get(child) != null) {
                    JSONArray ch = (JSONArray) hashVP.get(child);
                    ch.add(aVal);
                    hashVP.put(child, ch);
                } else {
                    JSONArray ch = new JSONArray();
                    ch.add(aVal);
                    hashVP.put(child, ch);
                }
            } else {
                r.add(aVal);
            }
        }
        return r;
    }

 5、效果图