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 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
javascript 验证日期的函数
Mar 18 Javascript
jquery特效 幻灯片效果示例代码
Jul 16 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
jQuery EasyUI Dialog拖不下来如何解决
Sep 28 Javascript
在javascript中随机数 math random如何生成指定范围数值的随机数
Oct 21 Javascript
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
JS实现进度条动态加载特效
Mar 25 Javascript
javascript实现贪吃蛇小游戏
Jul 28 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
关于php内存不够用的快速解决方法
2013/10/26 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
JavaScript编程开发中的五个实用小技巧
2010/07/22 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
利用JavaScript阻止表单提交的两种方法
2016/08/11 Javascript
nginx配置React静态页面的方法教程
2017/11/03 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
JavaScript实现动态生成表格
2020/08/02 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python把1变成01的步骤总结
2019/02/27 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
医院门卫岗位职责
2013/12/30 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
优质服务活动实施方案
2014/05/02 职场文书
优秀员工评优方案
2014/06/13 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
个人总结格式范文
2015/03/09 职场文书
2016年教师节感言
2015/12/09 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS