VUE 动态构建混合数据Treeselect选择树，同时解决巨树问题

最新推荐文章于 2023-02-06 11:26:40 发布

海盐老伍

最新推荐文章于 2023-02-06 11:26:40 发布

阅读量3.4k

点赞数 3

文章标签： vue java javascript vue.js

本文链接：https://blog.csdn.net/wujize/article/details/106106416

版权

本文介绍如何在Vue项目中利用Treeselect组件动态构建包含行政区域和景区的混合数据选择树，通过后台查询数据并采用懒加载策略，解决大数据量导致的性能问题。

摘要由CSDN通过智能技术生成

今天在项目中需要通过行政区域选择，然后选择该行政区域下面的景区，也就是要构建行政区划、景区两表数据表的树。全国的行政区域到县已经3500多了，再加上景区会有几万个点，这棵选择树不论是在后台还是在前台构建都比较大，会影响系统性能，需要前后端结合，动态构建，使用时用懒加载，提升系统性能。

一、后台构建两个表的数据选择查询功能

1、行政区域需要按省、市、县的adcode和级别查询，以便于动态构建。两个参数，adcode后台查询时会将后面的0去掉匹配，级别如果0或空，查询匹配下所有的，为数字只查本级。这里有两个参数，用@requestParam传递的，注意要用post，前端VUE使用get传递时会报错。

    @PostMapping("/listjson" )
    @ApiOperation("根据查询条件获取区划清单")
    public AjaxResult listJson(@RequestParam(name="adcode", required = true) String adcode, @RequestParam(name="level",required = true) String level)
    {
   
        System.out.println(adcode);
        List<Map<String, String>>  regionJson = iMapRegionService.selectRegionJson(adcode,level);
        return AjaxResult.success(regionJson);
    }
}

2、查询行政区域下的景区，根据adcode查询，一个参数，参数放在路径中传递的。

    @GetMapping("/listByCode/{adcode}")
    @ApiOperation("根据查询条件获取景区清单")
    public AjaxResult listByCode(@PathVariable String adcode)
    {
   
        List<Map<String, String>> scenicList = iMapScenicService.selectScenicByCode(adcode);
        return AjaxResult