Cascader 级联选择器的前后端写法

下面展示一些 前端代码。

 <el-form-item label="所属辖区:"   prop="adress"  placeholder="请选择所属辖区" >
                        <el-cascader
                                v-model="form.adress"
                                :show-all-levels="false"
                                :props="defaultParams"
                                :options="options"
                               :change-on-select="true"
                                clearable>
                        </el-cascader>
                    </el-form-item>

 data() {
     
  options:[],
  defaultParams: {
     
                    label: 'name',
                    value: 'id',
                    children: 'children'
                },
 }
  methods: {
     
   getESmCodeList() {
     
     myAjax({
     
                    url: window.homePath + "admin/business/point/findUnit?parentId=0",
                    async: false,
                    action: function (data) {
     
                        vm.options=data
                    }
                });
   }
  }
    created:function () {
     
            vm = this;
            vm.getESmCodeList();
        }

后端代码

@RequestMapping("findUnit")
    @JsonResultAnnotation
    public JsonResult findUnit(Integer parentId){
     
        List<Map<String,Object>>list=new ArrayList<>();
        List<Unit> fetch = jpaQueryFactory.selectFrom(qUnit)
                .where(qUnit.parentId.eq(parentId)).fetch();
        for(Unit unit:fetch){
     
            Map<String,Object> map=new HashMap<>();
            map.put("id",unit.getId());
            map.put("name",unit.getName());
            List<Unit> fetch1 = jpaQueryFactory.selectFrom(qUnit)
                    .where(qUnit.parentId.eq(unit.getId())).fetch();
            map.put("children",fetch1);
            list.add(map);
        }
        return JsonHelper.toJson(list);
    }

后端返回的数据为json格式，将级联的内容放在children内就可以，前端会自动对应的
。