java三级联动返回树状省市区三级json，前端el-tree显示

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>