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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
再谈javascript原型继承
Nov 10 Javascript
javascript修改图片src的方法
Jan 27 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
vue-router 控制路由权限的实现
Sep 24 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来处理多个提交任务
2006/10/09 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
jquery实现图片灯箱明暗的遮罩效果
2013/11/15 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
javascript写的一个模拟阅读小说的程序
2014/04/04 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python实现统计代码行的方法分析
2017/07/12 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
什么是会话Bean
2015/05/14 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
公立医院改革实施方案
2014/03/14 职场文书
大学生创业计划书
2014/08/14 职场文书
身边的榜样活动方案
2014/08/20 职场文书
师德师风自我评价范文
2014/09/11 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
爱国之歌(8首)
2019/09/29 职场文书
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫