效果如圖：
堅(jiān)守“ 做人真誠 · 做事靠譜 · 口碑至上 · 高效敬業(yè) ”的價(jià)值觀，專業(yè)網(wǎng)站建設(shè)服務(wù)10余年為成都成都建筑動(dòng)畫小微創(chuàng)業(yè)公司專業(yè)提供企業(yè)網(wǎng)站建設(shè)營銷網(wǎng)站建設(shè)商城網(wǎng)站建設(shè)手機(jī)網(wǎng)站建設(shè)小程序網(wǎng)站建設(shè)網(wǎng)站改版，從內(nèi)容策劃、視覺設(shè)計(jì)、底層架構(gòu)、網(wǎng)頁布局、功能開發(fā)迭代于一體的高端網(wǎng)站建設(shè)服務(wù)。
大概思路：樹形視圖使用的是vue官方事例代碼，java負(fù)責(zé)封裝數(shù)據(jù)，按照vue官方事例的數(shù)據(jù)結(jié)構(gòu)封裝數(shù)據(jù)即可。有兩個(gè)需要關(guān)注的點(diǎn)：
1.官方事例的數(shù)據(jù)結(jié)構(gòu)是一個(gè)對象里面包含著集合，而不是一個(gè)集合對象 2.遞歸算法
上代碼：
前端：html+js
后臺(tái)：java +MySQL，一共三個(gè)方法，分別是：1.獲取請求 2獲取所有菜單 3遞歸菜單的父子關(guān)系
重慶分公司
重慶分公司
/**
* 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:遞歸父子關(guān)系
* @author JaxWan
* @param id 父節(jié)點(diǎn)id
* @param EwTreeVOs2 菜單集合
* @param mapResult 結(jié)果集
* @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;
} 總結(jié)
以上所述是小編給大家介紹的vue+ java 實(shí)現(xiàn)多級(jí)菜單遞歸效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
