效果如圖：

大概思路：樹形視圖使用的是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

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;

}

{{ item.name }}

[{{ isOpen ? '-' : '+' }}]

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)"

>

+

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();

},

})

后臺：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)多級菜單遞歸效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對我們網(wǎng)站的支持！

如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

本文標(biāo)題: vue+ java 實(shí)現(xiàn)多級菜單遞歸效果

本文地址: http://www.cppcns.com/ruanjian/java/292425.html

總結(jié)

以上是生活随笔為你收集整理的java递归实现多级菜单栏_vue+ java 实现多级菜单递归效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。