vue+springBoot实现单击树节点，右侧表单数据展示本级和本级以下数据

实现结果

Vue

html部分

当单击树节点，执行handleNodeClick方法

<el-aside
                width="200px"
                style="height: 100vh; border-radius: 5px;border: 1px solid #ddd; background:white"
            >
                <el-row type="flex">
                    <el-col :span="20" :offset="3">
                        <el-header style="margin: 20px 0px 20px 0px">
                            <el-row>
                                <h1 style="font-size:15px;text-align:center;line-height:50px">题目类别</h1>
                            </el-row>
                            <div class="horizon">
                                <hr />
                            </div>
                        </el-header>
                        <el-card>
                            <el-tree
                                :data="treeData"
                                :props="defaultProps"
                                node-key="id"
                                @node-contextmenu="rightClick"
                                @node-click="handleNodeClick"
                            ></el-tree>
                        </el-card>
                        <div v-show="menuVisible">
                            <el-card>
                            <ul id="menu" class="menu" :model="treeItem">
                                <li class="menu__item" @click="TreeAdd(treeItem)">添加</li>
                                <li class="menu__item" @click="handleEdit(1,treeItem)">修改</li>
                                <li class="menu__item" @click="handleDelete(1,treeItem)">删除</li>
                            </ul>
                            </el-card>
                        </div>
                    </el-col>
                </el-row>
            </el-aside>

Js部分

通过queryData方法从后台查询出数据

handleNodeClick(data) {
            this.getIds(data);
            for (var i = 0; i < this.searchIds.length; i++) {
                this.vo.id = this.searchIds[i];
                this.ls.push(this.vo);
                this.CommonRequest.body.vo = this.ls;
                this.queryData();
                this.resetSearch();
            }
        },

//从后台查询数据
        queryData() {
            this.vo.pageIndex = this.page.pageIndex;
            this.vo.pageSize = this.page.pageSize; // vo传给request
            this.CommonRequest.body.vo = this.vo;
            queryCategory(this.CommonRequest.body.vo).then(response => {
                this.tableData = [];
                this.page.total = response.body.total;
                this.tableData = response.body.list;
                this.getTreeData();
            });
        },

SpringBoot

Controller部分

根据前台传过来的vo，判断是执行哪个查询，可能是根据搜索框得查询，可能是点击树节点得查询

	@ApiLog
    @PostMapping("/queryCategory")
    @CrossOrigin
    public CommonResponse<CommonPage<CategoryTableVO>> doQuery(@RequestBody CommonRequest<CategoryTableVO> request){
        CategoryDTO categoryDTO= new CategoryDTO();
        Map<String, CategoryTableVO> body = request.getBody();
        CategoryTableVO queryVO=body.get("vo");
        List<CategoryTableVO> resultList=new ArrayList<>();
        Page<Object> page = null;
        /*
        * 判断前台传过来的查询条件
        * */
        /*
        * 根据名字查询
        * */
        if(!queryVO.getName().equals("")){
            categoryDTO.setName(queryVO.getName());
             page = PageHelper.startPage(queryVO.getPageIndex(), queryVO.getPageSize());
            List<CategoryDTO> categoryDTOList=categoryService.query(categoryDTO);
            PojoUtil.copyList(categoryDTOList,resultList,CategoryTableVO.class);
        }
        /*
        * 点击树节点查询
        * */
        if(!queryVO.getId().equals("")){
            categoryDTO.setId(Long.valueOf(queryVO.getId()));
            page = PageHelper.startPage(queryVO.getPageIndex(), queryVO.getPageSize());
            List<CategoryDTO> treeList=categoryService.queryTreeData(categoryDTO);
            PojoUtil.copyList(treeList,resultList,CategoryTableVO.class);
        }
        /*
        * 只点击查询按钮
        * */
        if(queryVO.getName().equals("")&&queryVO.getId().equals("")){
            page = PageHelper.startPage(queryVO.getPageIndex(), queryVO.getPageSize());
            List<CategoryDTO> categoryDTOList=categoryService.query(categoryDTO);
            PojoUtil.copyList(categoryDTOList,resultList,CategoryTableVO.class);
        }
        return buildResponseWithPage(page,resultList);
    }

xml文件

<select id="queryTreeData" resultType="com.boss.bes.basedata.pojo.entity.Category">
        SELECT * from t_category where id=#{id}
        UNION ALL
        SELECT a.* FROM t_category a JOIN t_category b on a.parent_id=b.id
            where a.parent_id=#{id}
    </select>