vue搜索树形结构

vue搜索树形结构

前台代码
引入js文件

树结构

controller层

/**
     * 查询树形位置列表
     */
    @RequiresPermissions("media:place:list")
    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(@RequestBody Project project) {
        startPage();
        List list = placeService.selectPlaceList(project);
        return getDataTable(list);
    }

service层

    /**
     * 查询树形位置列表
     *
     * @param place 树形位置信息
     * @return 树形位置集合
     */
    public List selectPlaceList(Place place);

impl

@Override
    public List selectPlaceList(Place place) {
        //先查询符合条件的place
        List placeList=placeMapper.selectPlaceList(place);
        //遍历place列表，查询每个place的下级列表
        for(Place p:placeList){
            //查询条件是上级ID是该place的ID
            Place tempPlace=new Place();
            tempPlace.setPid(p.getId());

            p.setChildren(selectPlaceList(tempPlace));
        }
        return placeList;
    }

mapper层

public List selectPlaceList(Place place);

注意事项

    select id, pid, tree, name, grade, sort, position_type, did, disabled, has_addGarage from kj_place