效果如圖：
大概思路：樹形視圖使用的是vue官方事例代碼，java負責封裝數據，按照vue官方事例的數據結構封裝數據即可。有兩個需要關注的點：
1.官方事例的數據結構是一個對象里面包含著集合，而不是一個集合對象 2.遞歸算法
上代碼：
前端：html+js
<html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.9/dist/vue.js"></script> <!-- 引入樣式 --> <link rel="stylesheet" rel="external nofollow" > <!-- 引入組件庫 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="${ctx}/core-plugins/ew/depend/jquery/jquery.min.js" type="text/javascript"></script> <style> body { font-family: Menlo, Consolas, monospace; color: #444; } .item { cursor: pointer; } .bold { font-weight: bold; } ul { padding-left: 1em; line-height: 1.5em; list-style-type: dot; } </style> <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle" @dblclick="makeFolder"> {{ item.name }} <span v-if="isFolder">[{{ isOpen ? '-' : '+' }}]</span> </div> <ul v-show="isOpen" v-if="isFolder"> <tree-item class="item" v-for="(child, index) in item.children" :key="index" :item="child" @make-folder="$emit('make-folder', $event)" @add-item="$emit('add-item', $event)" ></tree-item> <li class="add" @click="$emit('add-item', item)">+</li> </ul> </li> </script> </head> <body> <div id="demo"> <ul > <tree-item class="item" :item="treeData" @make-folder="makeFolder" @add-item="addItem"> </tree-item> </ul> </div> </body> </html> <script> Vue.component('tree-item', { template: '#item-template', props: { item: Object }, data: function () { return { isOpen: false } }, computed: { isFolder: function () { return this.item.children && this.item.children.length } }, methods: { toggle: function () { if (this.isFolder) { this.isOpen = !this.isOpen }; }, makeFolder: function () { if (!this.isFolder) { this.$emit('make-folder', this.item) this.isOpen = true } } } }) var demo = new Vue({ el: '#demo', data: { treeData: {} }, methods: { makeFolder: function (item) { Vue.set(item, 'children', []) this.addItem(item) }, addItem: function (item) { item.children.push({ name: 'new stuff' }) }, searchData:function(){ debugger; axios.get('menuRoleLimitBLH_searchMenus.do?pageType=1') .then(response => ( this.treeData = response.data.json.menuMaps )) .catch(error => console.log(error)); } }, created() { this.searchData(); }, }) </script>
后臺：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<EwTreeVO> EwTreeVOs = dao.selectList("selectAllMenuTree");
List<Map<String, Object>> menus = this.getMenusList(EwTreeVOs);
Map<String, Object> map = new HashMap<String, Object>();
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<Map<String,Object>>
*/
public List<Map<String, Object>> getMenusList(List<EwTreeVO> EwTreeVOs){
List<Map<String, Object>> menus = new ArrayList<Map<String,Object>>();
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<String, Object> map = new HashMap<String, Object>();
map.put("id", id);
map.put("name", name);
map.put("pId", pId);
Map<String, Object> 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<String,Object>
*/
public Map<String, Object> digui(String id,List<EwTreeVO> EwTreeVOs2,Map<String, Object> mapResult){
List<Map<String, Object>> lists = new ArrayList<Map<String,Object>>();
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<String, Object> map2 = new HashMap<String, Object>();
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<String , Object> tempMap = lists.get(i);
String id1 = (String) tempMap.get("id");
this.digui(id1,EwTreeVOs2,tempMap);
}
return mapResult;
}
總結
以上所述是小編給大家介紹的vue+ java 實現多級菜單遞歸效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
