vue+java 实现树形菜单

---

前言

小白一枚.
目前项目有个实现物料档案查询的功能，其中树形菜单没做过。研究了一上午，使用ant-vue加java实现。
与大家分享一下。

---

一、数据库设计

必要字段：
id： 主键
pid： 父id
title： 名称
level：级别，1为跟级别

二、整体思路

前端页面加载时就进行，物料菜单查询。

具体方法

后台请求

 /**
	  *
	  * 查询指定层级物料档案
	  * @param level 级别，默认为1
	  * @return
	  */
	@RequestMapping("/queryInventoryClass")
	public Result<?> queryInventoryClass(@RequestParam("level") Integer level){
		// ComInventoryClass 物料实体类，其中含有childList孩子节点集合 参数
		if(null == level){
			return Result.error("系统出现未知错误！");
		}
		// 查询指定级别数据。方便后面拓展
		List<ComInventoryClass> result = comInventoryClassService.getInventoryClassList(level);
		if(result.size() == 0){
			return Result.error("物料菜单查询失败！");
		}
		for(ComInventoryClass comInventoryClass : result){
			// 递归调用查询孩子节点数据
			comInventoryClass.setChildList(comInventoryClassService.getNextLevel(comInventoryClass.getPkId()));
		}
		return Result.OK(result);
	}

getInventoryClassList方法

    /**
     * 根据层级level查询数据
     * @param level
     * @return
     */
    @Override
    public List<ComInventoryClass> getInventoryClassList(Integer level) {
        return comInventoryClassMapper.getInventoryClassByLevel(level);
    }

getNextLevel方法

    /**
     *  根据父id查找孩子菜单数据
     * @param id
     * @return
     */
    @Override
    public List<ComInventoryClass> getNextLevel(Long id){
        List<ComInventoryClass> childLists = comInventoryClassMapper.getNextInventoryClassByPId(id);//根据当前id（父）查询孩子集合
        if(childLists.size() == 0){// 递归退出条件
            return null;
        }
        for(ComInventoryClass inventoryClass : childLists){ //遍历所有孩子
            inventoryClass.setChildList(getNextLevel(inventoryClass.getPkId()));// 递归调用。基本树操作
        }
        return childLists;
    }

数据返回格式

前端展示

前端具体展示。请参考ant-vue官网。
https://www.antdv.com/components/tree-cn/

总结

这是一次性加载完所有菜单的操作。还有一种点击展开节点，动态加载菜单的操作后面会进行补充。