级联菜单的查询实现

一：原理

  级联菜单的原理就是一个下拉框，它是elementui的一个级联组件，后端需要给前端返回一个集合，首先后端需要查询出所有的上级部门，返回部门集合，然后将id作为key，对象作为value循环存入map，用于方便根据id获取对应的对象，然后创建一个新的集合用于存储处理后的部门树，循环上面的部门集合，如果parent_id为空，说明是顶级部门，直接将这个对象放进刚刚新创建的集合，如果不为空，就根据这个parent_id到map中get上级对象，然后将循环的这个对象放进上级对象的chilren子部门集合中，然后将这个集合返回给前端即可

二：前端

<el-form-item label="上级部门" prop="parent">
            <el-cascader v-model="editForm.parent_id"
                :options="deptTree"
                :props="{
                  label:'name',
                  value:'id',
                  checkStrictly: true
                }"
                clearable>
            </el-cascader>
        </el-form-item>

deptTree：即后端返回的部门树集合

label：即在显示框中显示的值

value：回显和往后端传值都需要

 //查询部门树
      getDeptTree(){
        this.$http.get("/department/deptTree").then(res=>{ //后台返回一个List
          this.deptTree = res.data
        }).catch(res=>{

        })
      },

三：后端业务

/**
     * 部门树
     * @return List
     */
    @Override
    public List<Department> deptTree() {
        //1.查询所有部门信息
        List<Department> all = departmentMapper.loadAll();
        //2.准备一个map去存储数据
        Map<Long, Department> map = new HashMap<>();
        //3.将所有数据放入map中
        for(Department department:all){
            map.put(department.getId(),department);
        }
        //4.准备一个集合用于保存处理后的数据
        List<Department> dpartmentTree = new ArrayList<>();
        for (Department department : all){
            if(department.getParent_id()==null){  //顶级部门
                dpartmentTree.add(department);
            }else{
                //获取parent_id
                Long parent_id = department.getParent_id();
                //获取上级部门对象
                Department parentDept = map.get(parent_id);
                //把自己放入上级部门的children中
                parentDept.getChildren().add(department);
            }
        }
        //返回处理完毕的部门树
        return dpartmentTree;
    }

实体类字段：

 //子集部门集合
    @JsonInclude(JsonInclude.Include.NON_EMPTY)  //部门树最后一页没有数据就不显示
    List<Department> children = new ArrayList<>();