ivew使用Cascader级联+后台实现三级联动

1.根据文档写出html中的代码

2.页面初始化加载时调用获取区域列表

Vue.http.post("../../..",
                    {}).then(function (res) {
                    let data = res.data.data;
                    self.areaList = data;
                });

3.编写后台代码按文档提供返回后端页面数据
文档示例

代码示例

Map resultMap = new HashMap(16);
        List<Map> returnMap = new ArrayList<Map>();
        Integer level = 1;
        List<AppCity> provinceList = appCityMapper.selectProvinceByLevel(level);
        //省份列表
        for (AppCity appCity:provinceList){
            Map provinceMap = new HashMap(16);
            provinceMap.put(ParameterConstant.VALUE,appCity.getId());
            provinceMap.put(ParameterConstant.LABEL,appCity.getName());
            provinceMap.put(ParameterConstant.CODE,appCity.getCode());
            level = 2;
            Map map = new HashMap(16);
            map.put(ParameterConstant.LEVEL,level);
            map.put(ParameterConstant.PARENT_CODE,appCity.getCode());
            List<AppCity> cityList = appCityMapper.selectCityByLevelAndCode(map);
            List<Map> queryMap = new ArrayList<Map>();
            //城市列表
            for (AppCity appCity1:cityList){
                Map cityMap = new HashMap(16);
                cityMap.put(ParameterConstant.VALUE,appCity1.getId());
                cityMap.put(ParameterConstant.LABEL,appCity1.getName());
                cityMap.put(ParameterConstant.CODE,appCity1.getCode());
                level = 3;
                Map newMap = new HashMap(16);
                newMap.put(ParameterConstant.LEVEL,level);
                newMap.put(ParameterConstant.PARENT_CODE,appCity1.getCode());
                List<AppCity> areaList = appCityMapper.selectAreaByLevelAndCode(newMap);
                List<Map> tempMap = new ArrayList<Map>();
                //区域列表
                for (AppCity appCity2:areaList){
                    Map areaMap = new HashMap(16);
                    areaMap.put(ParameterConstant.VALUE,appCity2.getId());
                    areaMap.put(ParameterConstant.LABEL,appCity2.getName());
                    areaMap.put(ParameterConstant.CODE,appCity2.getCode());
                    tempMap.add(areaMap);
                    cityMap.put("children",tempMap);
                }
                queryMap.add(cityMap);
                provinceMap.put("children",queryMap);
            }
            returnMap.add(provinceMap);
        }
        resultMap.put("cityList",returnMap);
        return BackResultUtil.success(returnMap);

4.按文档写出选中地区后的回执即文档中的format方法

format(labels, selectedData) {
                const index = labels.length - 1;
                const data = selectedData[index];
                if (data && data.code) {
                    self.formData.areaCode = data.code;//将值进行绑定用于传给后台
                    return labels[index] + ' - ' + data.code;
                }
                return labels[index];
            }