vue cascader级联下拉和数据回显

最近在做项目的时候，有个部门级联下拉功能的实现，首次接触，然后根据el-cascader这个组件查看他的属性和方法，在进行数据回显得时候，我用了最笨的方法，就是获取所有的部门数据，然后根据这条数据的部门ID进行遍历比对，由于cascader这个组件它存的是数组，所以将比成功的放在数组中，然后令ruleForm.departmentId等于这个数组。下面附代码：

1、在form表单

2、申明变量

departData: [],  //存放部门信息
departProp: {
    label: 'name',
    children: 'children',
    value: 'id'
},

3、

//加载部门数据
// departSelect: function(){
//     let vm =this;
//     vm.$axios.get('departments/tree').then(function(res) {
//         vm.departData = res.data.data;
//         if(vm.nowDepart != null && vm.nowDepart.length != 0){
//             var departArr = [];
//             for(let i in res.data.data){
//                 //二级
//                 var secondChildren = res.data.data[i].children;
//                 if(res.data.data[i].hasChildren){
//                     for(let j in secondChildren){
//                         //三级
//                         var thirdChildren = secondChildren[j].children;
//                         if(secondChildren[j].hasChildren){
//                             for(let k in thirdChildren){
//                                 var fourthChildren = thirdChildren[k].children;
//                                   if(thirdChildren[k].hasChildren){
//                                     for(let m in fourthChildren){
//                                         if(vm.nowDepart == fourthChildren[m].id){
//                                             departArr.push(res.data.data[i].id);
//                                             departArr.push(secondChildren[j].id);
//                                             departArr.push(thirdChildren[k].id);
//                                             departArr.push(fourthChildren[m].id);
//                                         }
//                                     }
//                                 }else{
//                                     if(vm.nowDepart == thirdChildren[k].id){
//                                         departArr.push(res.data.data[i].id);
//                                         departArr.push(secondChildren[j].id);
//                                         departArr.push(thirdChildren[k].id)
//                                     }
//                                 }
//                             }
//                         }else{
//                             if(vm.nowDepart == secondChildren[j].id){
//                                 departArr.push(res.data.data[i].id);
//                                 departArr.push(secondChildren[j].id)
//                             }
//                         }
//                     }
//                 }
//                 if(vm.nowDepart == res.data.data[i].id){
//                     departArr.push(res.data.data[i].id);
//                 }
//             }
//             vm.ruleForm.departmentId=departArr;
//         }
//     })
// },

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

后端：

controller:

@ApiOperation(value = "获取所有部门")
@GetMapping("departments/tree")
public JSONObject getDepartmentsTree(){
    return success(iDepartmentService.getAllTreeDepartments());
}

Iservice:

/**
 * 获取所有部门封装成树
 * @return
 */
List getAllTreeDepartments();

实现类：

@Override
public List getAllTreeDepartments() {
    Set departments = this.findByParentId(0);
    departments.forEach(department -> {
        this.getChildren(department);
    });
    ArrayList departmentArrayList = new ArrayList<>(departments);
    return departmentArrayList.stream().sorted(Comparator.comparing(Department::getSort)).collect(Collectors.toList());
}

/**
 * 递归查询，判断department是否有子节点，无返回本身，有放入menu.children中
 * @param department
 * @return
 */
public Department getChildren(Department department){
    if (department.isHasChildren()){
        Set childrenMenus = this.findByParentId(department.getId());
        childrenMenus.forEach(item->{
            getChildren(item);
        });
        ArrayList children = new ArrayList<>(childrenMenus);
        department.setChildren(children.stream().sorted(Comparator.comparing(Department::getSort)).collect(Collectors.toList()));
    }
    return department;
}