vue 实现的树形菜的实例代码

2024-09-27 14:18:40

下面一段代码给大家介绍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 实现的树形菜的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Vue组件tree实现树形菜单
Vue2递归组件实现树形菜单
Vue2组件tree实现无限级树形菜单
Vue.js 递归组件实现树形菜单（实例分享）
Vue.js组件tree实现无限级树形菜单

Vue2组件tree实现无限级树形菜单

一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst
Vue.js组件tree实现无限级树形菜单

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c
用 Vue.js 递归组件实现可折叠的树形菜单(demo)

在Vue.js中一个递归组件调用的是其本身,如: Vue.component('recursive-component', { template: ` <recursive-component></recursive-component>` }); 递归组件常用于在blog上显示注释.嵌套的菜单,或者基本上是父和子相同的类型,尽管具体内容不同.例如: 现在给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形
Vue2递归组件实现树形菜单

今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子 //思想:当v-if='false'时,循环时进行的.所以一开始就设置为false. ggg:{ name:'gs', template:` <div> <p @click.stop='show=!show'>我是p标签</p> //这儿show必须要初始值为false,不然就是堆
Vue.js 递归组件实现树形菜单（实例分享）

最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
Vue组件tree实现树形菜单

vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数,点击节点时回调,参数为节点信息用法:<launch-tree :list='list' :options='options'></launch-tree> list = [ { name: '一级目录', // 目录名字 isOpen: true, // 是否初始展开目录
vue 实现的树形菜的实例代码

下面一段代码给大家介绍vue 实现的树形菜单功能,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <l
vue递归组件实战之简单树形控件实例代码

1.递归组件-简单树形控件预览及问题在编写树形组件时遇到的问题: 组件如何才能递归调用? 递归组件点击事件如何传递? 2.树形控件基本结构及样式 <template> <ul class="vue-tree"> <li class="tree-item"> <div class="tree-content"> <div class="expand-
jQuery 利用ztree实现树形表格的实例代码

最近公司的项目中要做一个树形表格,因为之前一直在用ztree实现基本的树形结构,理所当然的首先想到利用ztree来做. 网上找了一下别人做的树形表格,有使用ztree的,也有使用treeTable的,但效果都不太好,于是参考使用ztree的做法自己做了一个,贴出来供大家参考,请看注释说明,效果如下所示. <!DOCTYPE HTML> <html> <head> <link href="https://cdn.bootcss.com/zTree.v3/3
Vue.js实现输入框绑定的实例代码

实现效果如下: 实现代码及注释 <!DOCTYPE html> <html> <head> <title>vue.js数据动态编辑</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type=
vue做网页开场视频的实例代码

本demo背景是一个视频,文字是打印机效果,按钮在文字打完才会显示,点击按钮背景向上收起,同时显示默认首页组件(如是初建vue项目列表,则为helloWorld.vue的组件内容) 公司电脑没有gif动图尽情谅解文末会附上demo地址,如需看效果,可前往下载本人一直很喜欢网页开场有一段视频或动画,个人认为网页的开场动画起到引导浏览作用,相当于网页的一个开始,一个好的开始往往就成功了一半,对于浏览网站的用户来说,也就吸引了极大地注意力. 以上都是废话,网页开场动画在移动端的应用十分广泛,具体操
Java构建树形菜单的实例代码(支持多级菜单)

效果图:支持多级菜单. 菜单实体类: public class Menu { // 菜单id private String id; // 菜单名称 private String name; // 父菜单id private String parentId; // 菜单url private String url; // 菜单图标 private String icon; // 菜单顺序 private int order; // 子菜单 private List<Menu> children;
vue的全局提示框组件实例代码

这篇文章给大家介绍一个vue全局提示框组件,具体代码如下所示: <template>  <div v-show="visible" class="dialog-tips dialog-center"> <div>{{message}}</div> </div> </template> <script> export default { data
Vue cli+mui 区域滚动的实例代码

vue cli+mui配合使用达到区域滚到的效果 ,方法如下第一步引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll">
Android 绘制多级树形选择列表实例代码

一.概述前段时间有个项目的需要在Android端显示一个复选的多层树形控件,主要展示一个公司的组织架构,类似总部下面有各个部门,部门之下是组和员工等.另外需要加上展开与回收部门详情.关闭部分已开展的布局.勾选等功能. 效果图如下: 二.思路分析毫无疑问,对于这种数据可能达到几千几万行的列表视图,我们需要选择recyclerview等具有回收item功能的控件,因此Item的状态保持放在Model中而不是View中. 由于原始数据是树形结构的,我们需要先将树形结构转换为列表数据,类似根结点 -
Vue实现侧边菜单栏手风琴效果实例代码

效果图如下所示: <template> <div class="asideBox"> <aside> <ul class="asideMenu"> <li v-for="(item,index) in menuList"> <div class="oneMenu" @click="showToggle(item,index)"> <

vue 实现的树形菜的实例代码

您可能感兴趣的文章:

相关推荐

随机推荐