java三级联动返回树状省市区三级json,前端el-tree显示
java实现
前端使用element-plus
的el-tree
组件,返回的json每一级要统一名称
@RequestMapping("/define")
public class SomeController {
@Autowired
ProvinceRepository provinceRepository;
@Autowired
CityRepository cityRepository;
@Autowired
AreaRepository areaRepository;
@RequestMapping("/returnTree")
public List<Map<String, Object>> returnTree() {
// 获取第一层
List<Province> maps1 = provinceRepository.getAllProvince();
List<Map<String, Object>> listMap = new ArrayList<>();
System.out.println(maps1);
for (Province item1 : maps1) {
Map<String,Object> map1 = new HashMap<>();
String pid = item1.getPid();
System.out.println(pid);
map1.put("id", pid);
map1.put("name", item1.getProvinceName());
// 获取第二层
List<City> maps2 = cityRepository.getByPid(pid);
System.out.println(maps2.size());
List<Map<String,Object>> listMap2 = new ArrayList<>();
for (City item2 : maps2) {
Map<String,Object> map2 = new HashMap<>();
String cid = item2.getCid();
map2.put("id", cid);
map2.put("name", item2.getCityName());
listMap2.add(map2);
// 获取第三层
List<Area> maps3 = areaRepository.getByCid(cid);
List<Map<String,Object>> listMap3 = new ArrayList<>();
System.out.println(maps3.size());
for (Area item3 : maps3) {
Map<String,Object> map3 = new HashMap<>();
map3.put("id",item3.getAid());
map3.put("name",item3.getAreaName());
listMap3.add(map3);
}
map2.put("children",listMap3);
}
map1.put("children",listMap2);
listMap.add(map1);
}
return listMap;
}
}
例子中orm使用jpa
public interface ProvinceRepository extends JpaRepository<Province,String> {
@Query("from Province ")
List<Province> getAllProvince();
}
public interface CityRepository extends JpaRepository<City,String> {
@Query("from City where pid = ?1")
List<City> getByPid(String pid);
}
public interface AreaRepository extends JpaRepository<Area,String> {
@Query("from Area where cid = ?1")
List<Area> getByCid(String cid);
}
前端vue读取并显示
<template>
<div class="aside">
<el-button @click="getData()">getData</el-button>
<el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
</div>
</template>
<script setup lang="ts" name="Tree">
import { ElTree } from 'element-plus';
// 通过getCurrentInstance方法获取上下文,这里的proxy就相当于this
const { proxy } = getCurrentInstance() as any;
interface Tree {
id: number,
label: string
children?: Tree[]
}
const defaultProps = {
children: 'children',
label: 'label',
}
const treeData = ref<Tree[]>([]);
//请求
const getData = function () {
proxy.axios.get('/define/returnTree').then(function (res: any) {
console.log(res.data);
treeData.value = res.data;
})
}
const handleNodeClick = (data: Tree) => {
console.log(data)
}
onMounted(() => {
getData();
})
</script>
<style lang = "scss" scoped>
</style>
![](https://img-blog.csdnimg.cn/a0f2fa72decf4766874e335e76f31592.gif)