省市区数据
数据形式为sql文件，数据表字段设计如下，请点击数据下载
后端
vo
由于数据需要在前端显示，为了方便使用前端组件，特意封装此vo类
import lombok.AllArgsConstructor; import lombok.Data; import java.util.List; /** * 存储地址项 如广东省 茂名市 电白区 */ @Data @AllArgsConstructor public class AreaItemVo { /** * 存储id */ private Long value; private String label; private List<AreaItemVo> children; public AreaItemVo(Long value, String label) { this.value = value; this.label = label; } }
service
@Override public List<AreaItemVo> getAreaTree() { 声明变量 List<AreaItemVo> areaItemVoList = new ArrayList<>(); //查询出所有省市区数据 List<ProvinceCityRegionEntity> provinceCityRegionEntityList = baseMapper.selectList(null); //过滤出所有省 List<ProvinceCityRegionEntity> fatherList = provinceCityRegionEntityList.stream().filter(item -> { if (item.getParentId() == 0) { return true; } else { return false; } }).collect(Collectors.toList()); for (ProvinceCityRegionEntity father : fatherList) { AreaItemVo areaItemVo = new AreaItemVo(father.getId(), father.getName()); this.searchSon(areaItemVo, provinceCityRegionEntityList); areaItemVoList.add(areaItemVo); } return areaItemVoList; } private void searchSon(AreaItemVo father, List<ProvinceCityRegionEntity> provinceCityRegionEntityList) { List<AreaItemVo> sonList = provinceCityRegionEntityList.stream().filter(item -> { if (item.getParentId() == father.getValue().intValue()) { return true; } else { return false; } }).map(item1 -> { AreaItemVo son = new AreaItemVo(item1.getId(), item1.getName()); //继续给儿子寻找孙子 this.searchSon(son, provinceCityRegionEntityList); return son; }).collect(Collectors.toList()); father.setChildren(sonList); }
controller
/** * 获取省市区的树形结构数据 * @return */ @GetMapping("/getAreaTree") public R getAreaTree() { List<AreaItemVo> areaItemVoList = provinceCityRegionService.getAreaTree(); return R.ok().addData("areaItemVoList", areaItemVoList); }
前端
使用Element UI的级联选择器来显示结果非常之贴切
<el-form-item label="地区"> <el-cascader v-model="province_city_area" :options="areaItemVoOptions" clearable></el-cascader> </el-form-item>
发请求向后端获取数据
//获取省市区的树形结构数据 getAreaTree() { provinceCityRegionApi.getAreaTree().then( res => { this.areaItemVoOptions = res.areaItemVoList } ) },
当然，直接接收后端的数据还是不行的，会出现如下问题
修正版，如果children没有元素，那就直接设置undefined即可
//获取省市区的树形结构数据 getAreaTree() { provinceCityRegionApi.getAreaTree().then( res => { this.areaItemVoOptions = res.areaItemVoList for (let i = 0; i < this.areaItemVoOptions.length; i++) { this.setNullToUndefined(this.areaItemVoOptions[i]) } } ) }, //将没有子元素的父类的chidren设置为 undefined setNullToUndefined(areaItemVo) { if (areaItemVo.children.length < 1) { areaItemVo.children = undefined; } else { for (let i = 0; i < areaItemVo.children.length; i++) { this.setNullToUndefined(areaItemVo.children[i]) } } }
效果展示
