vue cascade rカスケードドロップダウンとデータエコー

最近プロジェクトをしているとき、部門カスケードドロップダウン機能の実現があって、初めて接触して、それから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;
}