vue实现树形菜单效果


Posted in Javascript onMarch 19, 2018

本文实例为大家分享了vue实现树形菜单效果展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>vue</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="animate.css">
 <script src="vue.js"></script>

 <style>
  *{
  color:#585858;
  
  }
  #app{
  min-height: 650px;
  }
  #app li{
  list-style-type:none;
  }
  #app a{
  text-decoration:none;
  }
  #app button{
  width:100%;
  }
  #app ul{
  padding:10px;
  }
  #app span{
  cursor:pointer;
  }
  #tree{
  border: 1px solid #ccc;  
  min-height: 650px;
  width: 50%;
  margin:0;
  padding-top: 10px;
  background-color:#f2f2f2;
  position: absolute;
  top:0;
  left:0;
  }
  
  #tree li {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
  min-height: 32px;
  line-height:32px;
  }
 </style>
 </head>

 <body>

 <div id='app' @click='hideTree($event)'>
  <button @click.stop="show = !show">点我</button>
  
  <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
  <item v-bind:tree='treeData' id='tree' v-if="show"></item> 
  </transition> 
 </div>


 <template id='tree-template'>
  <ul>
  <li v-for='(v,i) in tree'> 
   <span v-if="isFolder(v)" @click="toggle(i)">{{ tree[i].open ? '-' : '+' }}</span>
   <a data-id="v.id">{{v.city}}</a> 
   <item v-bind:tree='v.child' v-show="tree[i].open"></item>
  </li>
  </ul> 
 </template>

 <script>
  var data = [{"id":26,"pid":1,"city":"四川省"},{"id":30,"pid":1,"city":"云南省"},{"id":322,"pid":26,"city":"成都"},{"id":323,"pid":26,"city":"绵阳"},{"id":324,"pid":26,"city":"阿坝"},{"id":325,"pid":26,"city":"巴中"},{"id":326,"pid":26,"city":"达州"},{"id":327,"pid":26,"city":"德阳"},{"id":328,"pid":26,"city":"甘孜"},{"id":329,"pid":26,"city":"广安"},{"id":330,"pid":26,"city":"广元"},{"id":331,"pid":26,"city":"乐山"},{"id":332,"pid":26,"city":"凉山"},{"id":333,"pid":26,"city":"眉山"},{"id":334,"pid":26,"city":"南充"},{"id":335,"pid":26,"city":"内江"},{"id":336,"pid":26,"city":"攀枝花"},{"id":337,"pid":26,"city":"遂宁"},{"id":338,"pid":26,"city":"雅安"},{"id":339,"pid":26,"city":"宜宾"},{"id":340,"pid":26,"city":"资阳"},{"id":341,"pid":26,"city":"自贡"},{"id":342,"pid":26,"city":"泸州"},{"id":367,"pid":30,"city":"昆明"},{"id":378,"pid":30,"city":"曲靖"},{"id":3100,"pid":367,"city":"盘龙区"},{"id":3101,"pid":367,"city":"五华区"},{"id":3102,"pid":367,"city":"官渡区"},{"id":3103,"pid":367,"city":"西山区"},{"id":3104,"pid":367,"city":"东川区"},{"id":3105,"pid":367,"city":"安宁市"},{"id":3106,"pid":367,"city":"呈贡县"},{"id":3107,"pid":367,"city":"晋宁县"},{"id":3108,"pid":367,"city":"富民县"},{"id":3109,"pid":367,"city":"宜良县"},{"id":3110,"pid":367,"city":"嵩明县"},{"id":3111,"pid":367,"city":"石林县"},{"id":3112,"pid":367,"city":"禄劝"},{"id":3113,"pid":367,"city":"寻甸"},{"id":3189,"pid":378,"city":"麒麟区"},{"id":3190,"pid":378,"city":"宣威市"},{"id":3191,"pid":378,"city":"马龙县"},{"id":3192,"pid":378,"city":"陆良县"},{"id":3193,"pid":378,"city":"师宗县"},{"id":3194,"pid":378,"city":"罗平县"},{"id":3195,"pid":378,"city":"富源县"},{"id":3196,"pid":378,"city":"会泽县"},{"id":3197,"pid":378,"city":"沾益县"}];

  var treeData = createTree({
  idname:'id',
  pidname:'pid',
  rootid:1,
  data:data
  });

  function createTree(arg){
  var idname = arg.idname,
   pidname = arg.pidname,
   rootid = arg.rootid,
   data = arg.data,
   treeData = [];
  var _createTree = function(id){
   var ret = []; 
   var index = 0;
   for(var i = 0; i < data.length; i++){  
   if(data[i][pidname] == id){
    ret[index] = data[i];
    ret[index].child = _createTree(data[i][idname]);
    index++;
   } 

   }
   return ret;
  }

  var index = 0;
  for(var i = 0; i < data.length; i++){  
   if(data[i][pidname] == rootid){
   treeData[index] = data[i];
   treeData[index].child = _createTree(data[i][idname]);
   index++;
   } 
  }
  return treeData;
  }

  Vue.component('item', {
  template: '#tree-template',
  props: ['tree'],
  data: function () {
   return {}
  },
  methods: {
   toggle: function (i) {
   this.tree[i].open = !this.tree[i].open;
   this.$set(this.tree, i, this.tree[i]);
   },
   isFolder: function (data) {
   return data.child && data.child.length
   },

  },
  })

  var vm = new Vue({
  el: '#app',
  data: {
   treeData: treeData,
   show:false,
  },
  methods: {
   hideTree:function(e){
   if(e.target.id == 'app'){
    console.log(137);
    this.show = false;
   }
   }
  },
  created: function () {
   function _addOpen(data) {
   for (var i = 0; i < data.length; i++) {
    data[i]['open'] = false;
    if (data[i].child.length > 0) {
    _addOpen(data[i].child);
    }
   }
   }
   _addOpen(this.treeData);
  }
  });
 </script>

 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS查看对象功能代码
Apr 25 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
js判断上传文件的类型和大小示例代码
Oct 18 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
JavaScript中绑定事件的三种方式及去除绑定
Nov 05 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
VUE重点问题总结
Mar 19 #Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
分析javascript原型及原型链
Mar 18 #Javascript
You might like
PHP递归调用的小技巧讲解
2013/02/19 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
PhpStorm配置Xdebug调试的方法步骤
2019/02/02 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
javascript中的throttle和debounce浅析
2014/06/06 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
2017/11/20 Javascript
vue监听对象及对象属性问题
2018/08/20 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
解决vue页面渲染但dom没渲染的操作
2020/07/27 Javascript
python基础教程之字典操作详解
2014/03/25 Python
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
取保候审保证书
2014/04/30 职场文书
端午节活动总结
2014/08/26 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
县委务虚会发言材料
2014/10/20 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
Android中的Launch Mode详情
2022/06/05 Java/Android