网站设计 导航条,付款网站源码,jsp网站开发中常见问题,梅州建站网络有限公司效果如图#xff1a;大概思路#xff1a;树形视图使用的是vue官方事例代码#xff0c;java负责封装数据#xff0c;按照vue官方事例的数据结构封装数据即可。有两个需要关注的点#xff1a;1.官方事例的数据结构是一个对象里面包含着集合#xff0c;而不是一个集合对象 2…效果如图大概思路树形视图使用的是vue官方事例代码java负责封装数据按照vue官方事例的数据结构封装数据即可。有两个需要关注的点1.官方事例的数据结构是一个对象里面包含着集合而不是一个集合对象 2.递归算法上代码前端htmljsbody {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 ? - : }}]classitemv-for(child, index) in item.children:keyindex:itemchildmake-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?pageType1).then(response (this.treeData response.data.json.menuMaps)).catch(error console.log(error));}},created() {this.searchData();},})后台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://www.cppcns.com/ruanjian/java/292425.html
