平武建站

vue+java实现多级菜单递归效果

效果如图：

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都成都建筑动画小微创业公司专业提供企业网站建设营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

vue+ java 实现多级菜单递归效果

大概思路：树形视图使用的是vue官方事例代码，java负责封装数据，按照vue官方事例的数据结构封装数据即可。有两个需要关注的点：

1.官方事例的数据结构是一个对象里面包含着集合，而不是一个集合对象 2.递归算法

上代码：

前端：html+js

后台：java +MySQL，一共三个方法，分别是：1.获取请求 2获取所有菜单 3递归菜单的父子关系

/**
 * Purpose:菜单列表页面
 * @author JaxWan
 * @param req
 * @return IZrarResponse
 */
 public IZrarResponse searchMenus(IZrarRequest req){
 IZrarResponse res = new ZrarResponse();
 String pageType = req.getParameter("pageType");
 if(StringUtil.isNotNull(pageType)){
 List EwTreeVOs = dao.selectList("selectAllMenuTree");
 List> menus = this.getMenusList(EwTreeVOs);
 Map map = new HashMap();
 map.put("id", 1);
 map.put("name", 2);
 map.put("children", menus);
 res.addJson("menuMaps", map);
 }else {
 res.addPage("pages/ewsys/dept/menu_role_limit.jsp").addJSTL("isExtForm", false).addJSTL("isEmptyForm", false);
 }
 return res;
 }
/**
 * Purpose:获取菜单集合
 * @author JaxWan
 * @param EwTreeVOs
 * @return List>
 */
 public List> getMenusList(List EwTreeVOs){
 List> menus = new ArrayList>();
 for (int i = 0; i < EwTreeVOs.size(); i++) {
 EwTreeVO ewTreeVO = EwTreeVOs.get(i);
 String id = ewTreeVO.getId();
 String name = ewTreeVO.getName();
 String pId = ewTreeVO.getpId();
 Map map = new HashMap();
 map.put("id", id);
 map.put("name", name);
 map.put("pId", pId);
 Map map2 = this.digui(id, EwTreeVOs,map);
 menus.add(map2);
 }
 return menus;
 }
 
 /**
 * Purpose:递归父子关系
 * @author JaxWan
 * @param id 父节点id
 * @param EwTreeVOs2 菜单集合
 * @param mapResult 结果集
 * @param lists 孩子集合
 * @return Map
 */
 public Map digui(String id,List EwTreeVOs2,Map mapResult){
 List> lists = new ArrayList>();
 for (int j = 0; j < EwTreeVOs2.size(); j++) {
 EwTreeVO ewTreeVO2 = EwTreeVOs2.get(j);
 String id2 = ewTreeVO2.getId();
 String name2 = ewTreeVO2.getName();
 String pId2 = ewTreeVO2.getpId();
 if(id.equals(pId2)){
 Map map2 = new HashMap();
 map2.put("id", id2);
 map2.put("name", name2);
 map2.put("pId", pId2);
 lists.add(map2);
 EwTreeVOs2.remove(j);
 j--;
 }
 }
 mapResult.put("children", lists);
 for (int i = 0; i < lists.size(); i++) {
 Map tempMap = lists.get(i);
 String id1 = (String) tempMap.get("id");
 this.digui(id1,EwTreeVOs2,tempMap);
 }
 return mapResult;
 }

总结

以上所述是小编给大家介绍的vue+ java 实现多级菜单递归效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！


分享名称：vue+java实现多级菜单递归效果
网站地址：http://pwwzsj.com/article/jjpsoc.html

其他资讯