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 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
JQuery切换显示的效果实例代码
Feb 27 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
php 团购折扣计算公式
2011/11/24 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP中预定义的6种接口介绍
2015/05/12 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript中的location用法简单介绍
2007/03/07 Javascript
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
详解javascript传统方法实现异步校验
2016/01/22 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
2016/08/24 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
使用python实现baidu hi自动登录的代码
2013/02/10 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
python实现彩色图转换成灰度图
2019/01/15 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
局域网标准
2016/09/10 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
学期评语大全
2014/04/30 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
实习科室评语
2015/01/04 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
golang日志包logger的用法详解
2021/05/05 Golang