您好,登錄后才能下訂單哦!
效果如圖:
大概思路:樹形視圖使用的是vue官方事例代碼,java負責封裝數(shù)據(jù),按照vue官方事例的數(shù)據(jù)結構封裝數(shù)據(jù)即可。有兩個需要關注的點:
1.官方事例的數(shù)據(jù)結構是一個對象里面包含著集合,而不是一個集合對象 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 父節(jié)點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 實現(xiàn)多級菜單遞歸效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉載,煩請注明出處,謝謝!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。