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/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
jquery常用的12个小功能
Jul 22 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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
重置版游戏视频
2020/04/09 魔兽争霸
PHP5 安装方法
2007/01/15 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
PHP正则匹配到2个字符串之间的内容方法
2018/12/24 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
微信小程序实现简单评论功能
2018/11/28 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
Python表达式的优先级详解
2020/02/18 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
经理秘书找工作求职信
2013/12/19 职场文书
服务质量承诺书
2014/03/27 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
请假条应该怎么写?
2019/06/24 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server