vue+java实现多级菜单递归效果-创新互联

效果如图：

振安ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为创新互联建站的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：028-86922220（备注：SSL证书合作）期待与您的合作！

vue+ java 实现多级菜单递归效果

大概思路：树形视图使用的是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" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" 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>

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文题目：vue+java实现多级菜单递归效果-创新互联
浏览地址：https://www.cdcxhl.com/article6/dohgog.html

成都网站建设公司_创新互联，为您提供App设计、网站改版、响应式网站、App开发、网站排名、微信小程序

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容