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" rel="external nofollow" >
    <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>

总结

以上所述是小编给大家介绍的vue 实现的树形菜的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 跨域和ajax 跨域问题小结
Jul 01 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
Ajax提交与传统表单提交的区别说明
Feb 07 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
VSCode搭建React Native环境
May 07 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
分析javascript原型及原型链
Mar 18 #Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 #Javascript
You might like
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP+MySQL实现在线测试答题实例
2020/01/02 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
Javascript加载速度慢的解决方案
2014/03/11 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript事件类型中UI事件详解
2016/01/14 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/25 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
python打印异常信息的两种实现方式
2019/12/24 Python
Python模拟登入的N种方式(建议收藏)
2020/05/31 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
UGG英国官方网站:UGG UK
2018/02/08 全球购物
可靠的数据流传输TCP
2016/03/15 面试题
期末自我鉴定
2014/02/02 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
学校消防安全责任书
2014/07/23 职场文书
仙境之桥观后感
2015/06/16 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
2016年中学法制宣传日活动总结
2016/04/01 职场文书
Python词云的正确实现方法实例
2021/05/08 Python
Django REST framework 限流功能的使用
2021/06/24 Python
Java中的Kotlin 内部类原理
2022/06/16 Java/Android