精华内容
下载资源
问答
  • vue实现树形菜单
    千次阅读
    2022-03-21 09:25:11

    技术点:

    1. 数据结构
    2. 递归
    3. 父子传值
    4. 开关控制

    数据结构设计

    单个菜单的结构设计为一下:

     {
       //顶层菜单名
       title:"1",
       //控制子菜单折叠
       isOpen:false,
       //菜单选项
       items:[
         'test',
         'bbb',
         'ccc'
        ],
        //子菜单
         child:[]
    },
    

    一个菜单的内容设计为,标题,选项,子菜单3各主要的属性,isOpen用于标识子菜单是否显示(也就是折叠),数组表示当前菜单下的所有子菜单,可以存放多个子菜单,表示出来如下所示。

          {
              //顶层菜单名
              title:"1",
              isOpen:false,
              //菜单选项
              items:[
                'test',
                'bbb',
                'ccc'
              ],
              //子菜单
              child:[
                {
                  title:"1-1",
                  isOpen:false,
                  items:[
                    'ddd',
                    'eee',
                    'fff'
                  ],
                  child:[
                    {
                      title:"1-1-1",
                      isOpen:false,
                      items:[
                        'ggg',
                        'hhh',
                        'iii'
                      ],
                      child:[]
                    },
                  ]
                }
              ]
            },
    

    基于vue的条件渲染和列表渲染,我们在组件中把这个数据根据我们想要的形式遍历出来如下所示:

    <template>
    <!--
      基于 TreeMenu 嵌套方式实现的菜单树
    -->
      <!-- closeAll 用于级联关闭所有打开的子菜单及其选项 -->
      <div class="menu" v-for="(menu,index) in menus" :key="menu" @click="close(index)">
    
        <!--  当前菜单名  通过点击事件来修改当前菜单项可见属性-->
        <div class="menu-title" @click="menu.isOpen=!menu.isOpen">
          <div>
            {{menu.title}}
          </div>
        </div>
    
        <div v-if="menu.isOpen">
          <!--  当前菜单选项    -->
          <div class="item" v-for="item in menu.items" :key="item">
            <div class="item-title" @click="openMenu(item)">
              {{item}}
            </div>
          </div>
          <!-- 此处若有子菜单会被加载出来 -->
          <div class="child-menu"  v-if="menu.isOpen">
            <TreeMenu :menus="menu.child"></TreeMenu>
          </div>
        </div>
      </div>
    
    </template>
    

    控制菜单项的可见性是整个菜单的核心,主要依靠修改当前菜单的控制变量来实现 @click="menu.isOpen=!menu.isOpen" 实现了当前菜单可见变量的修改,实现了单个菜单对其选项的控制。

    完成单个控制还不足以满足实际需要,关闭了一个父菜单的同时,子及以及孙子及都要一起关闭,更具vue编程的思想,同样是修改变量。变量修改对了也就能够实现。核心代码如下所示:

     methods:{
        close(e){
          //判断当前菜单是否打开,如果打开则关闭所有子菜单
          //此处的判断至关重要,若是不判断,在打开的一瞬间也同样出发级联关闭,导致永远无法打开菜单
          if (this.menus[e].isOpen===false){
            this.closeIndex(this.menus[e])
          }
        },
        //递归关闭子菜单
        closeIndex(data){
          data.isOpen=false //更改可见性
          if (data.child.length>0){ //若有子菜单则继续全部关闭,没有子菜单为递归出口
            for (let i=0;i<data.child.length;i++){
              this.closeIndex(data.child[i])
            }
          }
        },
      },
    

    到此实现完成!!

    vue的变量是全局的,用于控制显示的变量一定不能是同一个,否则很难实现菜单功能

    更多相关内容
  • vue实现树形菜单效果

    2020-08-27 20:23:33
    主要为大家详细介绍了vue实现树形菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 这次给大家带来vue实现树形菜单步骤说明,vue实现树形菜单的注意事项有哪些,下面就是实战案例,一起来看一下。vue*{color:#585858;}#app{min-height: 650px;}#app li{list-style-type:none;}#app a{text-decoration...

    这次给大家带来vue实现树形菜单步骤说明,vue实现树形菜单的注意事项有哪些,下面就是实战案例,一起来看一下。

    vue

    *{

    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;

    }

    点我

    • {{ tree[i].open ? '-' : '+' }}

      {{v.city}}

    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);

    }

    });

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    展开全文
  • 主要为大家详细介绍了Vue组件tree实现树形菜单,小巧实用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue实现带复选框的树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Vue实现树形菜单组件

    千次阅读 2019-08-11 17:38:58
    不管你用哪个,它们都是在Vue之上进行的二次封装,今天我们就来自己封装一个框架中的树形组件。 你可能会说,有现成的框架不使,为什么非要自己写一个呢?对于这个问题,不用我说,相信你自己会找到答案! 在贴...

    相信大部分小伙伴们在实际开发中都使用UI框架来节省开发时间,提升工作效率。Vue诞生后出现了许多优秀的UI框架,如element-ui、ant-design等。不管你用哪个,它们都是在Vue之上进行的二次封装,今天我们就来自己封装一个框架中的树形组件。

    你可能会说,有现成的框架不使,为什么非要自己写一个呢?对于这个问题,不用我说,相信你自己会找到答案!

    在贴代码之前,你必须知道什么是递归,而且还要知道在vue中组件如何递归。请看下图:

    如果没看懂也没关系,你只要记住组件如果要调用自身,必须通过name属性,下面是treeMenus组件:

    <template>
      <ul>
        <li v-for="(item,index) in list " :key="index">
          <p class="title" @click="changeStatus(index)">{{item.text}}</p>
          <tree-menus v-if="scopesDefault[index]" :list="item.nodes"></tree-menus>
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      name: "treeMenus",
      props: {
        list: Array
      },
      data() {
        return {
          scopesDefault: []
        };
      },
      methods: {
        changeStatus(index) {
          if (this.scopesDefault[index] === true) {
            this.$set(this.scopesDefault, index, false);
          } else {
            this.$set(this.scopesDefault, index, true);
          }
        }
      },
      created() {}
    };
    </script>
    
    <style scoped>
    ul {
      list-style: none;
    }
    p {
      margin: 0;
    }
    .title {
      cursor: pointer;
      border-top: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
    }
    </style>
    

    下面展示树形组件的数据以及父组件的调用:

    <template>
       <my-trees :list="treeData.area_list"></my-trees>
    </template>
    
    <script>
    // 父组件引用子组件,如果你想直接拿来用,路径要改对。
    import myTrees from '../components/TreeMenu.vue'
    
    // 树形组件数据,一次性全部加载。建议存到vuex或者本地缓存中。
    let treeData = {
      'state': 0,
      'area_list': [{
        'text': '全部地区',
        'area_id': 1,
        'nodes': [{
          'province': '广东省',
          'city': '',
          'area_id': 3,
          'text': '广东省',
          'county': '',
          'nodes': [{
            'province': '广东省',
            'city': '东莞',
            'area_id': 5,
            'text': '东莞',
            'county': '',
            'nodes': [{
              'province': '广东省',
              'text': '东莞区',
              'area_id': 81,
              'county': '县级市',
              'city': '东莞'
            }]
          }, {
            'province': '广东省',
            'city': '佛山市',
            'area_id': 28,
            'text': '中山',
            'county': '禅城区',
            'nodes': [{
              'province': '广东省',
              'text': '中山大学',
              'area_id': 32,
              'county': '中山区',
              'city': '中山'
            }, {
              'province': '广东省',
              'text': '华南理工',
              'area_id': 35,
              'county': '天河区',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '越秀区',
              'area_id': 77,
              'county': '越秀区',
              'city': '广州'
            }]
          }, {
            'province': '广东省',
            'city': '江门市',
            'area_id': 29,
            'text': '深圳',
            'county': '江海区',
            'nodes': [{
              'province': '广东省',
              'text': '南山区',
              'area_id': 157,
              'county': '南山区',
              'city': '深圳市'
            }]
          }, {
            'province': '山西省',
            'text': '韶关',
            'area_id': 30,
            'county': '小店区',
            'city': '太原市'
          }, {
            'province': '辽宁省',
            'text': '汕头',
            'area_id': 31,
            'county': '中山区',
            'city': '大连市'
          }, {
            'province': '吉林省',
            'text': '茂名',
            'area_id': 33,
            'county': '昌邑区',
            'city': '吉林市'
          }, {
            'province': '辽宁省',
            'text': '肇庆',
            'area_id': 36,
            'county': '中山区',
            'city': '大连市'
          }, {
            'province': '广东省',
            'text': '湛江',
            'area_id': 37,
            'county': '坡头区',
            'city': '湛江市'
          }, {
            'province': '广东省',
            'text': '茂名',
            'area_id': 38,
            'county': '茂南区',
            'city': '茂名市'
          }, {
            'province': '广东省',
            'text': '肇庆',
            'area_id': 40,
            'county': '鼎湖区',
            'city': '肇庆市'
          }, {
            'province': '广东省',
            'text': '宝安区',
            'area_id': 79,
            'county': '宝安区',
            'city': '深圳'
          }, {
            'province': '广东省',
            'city': '广州',
            'area_id': 88,
            'text': '广州',
            'county': '县级市',
            'nodes': [{
              'province': '广东省',
              'city': '广州',
              'area_id': 89,
              'text': '天河区',
              'county': '天河区',
              'nodes': [{
                'province': '广东省',
                'text': '黄埔大道西163号富星1号梯',
                'area_id': 183,
                'county': '天河区',
                'city': '广州市'
              }]
            }, {
              'province': '广东省',
              'text': '越秀区',
              'area_id': 90,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '番禺区',
              'area_id': 91,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '白云区',
              'area_id': 92,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '花都区',
              'area_id': 93,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '南沙区',
              'area_id': 94,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '从化区',
              'area_id': 95,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '增城区',
              'area_id': 96,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'city': '广州',
              'area_id': 97,
              'text': '黄埔区',
              'county': '县级市',
              'nodes': [{
                'province': '广东省',
                'text': '双岗',
                'area_id': 182,
                'county': '黄埔区',
                'city': '广州市'
              }]
            }, {
              'province': '广东省',
              'text': '荔湾区',
              'area_id': 98,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '海珠区',
              'area_id': 99,
              'county': '县级市',
              'city': '广州'
            }, {
              'province': '广东省',
              'text': '南沙区',
              'area_id': 180,
              'county': '南沙区',
              'city': '广州市'
            }]
          }]
        }, {
          'province': '福建省',
          'city': '',
          'area_id': 17,
          'text': '福建省',
          'county': '',
          'nodes': [{
            'province': '福州',
            'city': '',
            'area_id': 18,
            'text': '福州',
            'county': '',
            'nodes': [{
              'province': '福建省',
              'text': '福建师范',
              'area_id': 51,
              'county': null,
              'city': '厦门'
            }, {
              'province': '福建省',
              'text': '福州大学',
              'area_id': 52,
              'county': null,
              'city': '福州'
            }, {
              'province': '安徽省',
              'text': '安徽师范',
              'area_id': 75,
              'county': null,
              'city': null
            }]
          }, {
            'province': '厦门',
            'city': '',
            'area_id': 19,
            'text': '厦门',
            'county': '',
            'nodes': [{
              'province': '福建省',
              'text': '厦门大学',
              'area_id': 50,
              'county': null,
              'city': '厦门'
            }]
          }, {
            'province': '福建省',
            'text': '莆田',
            'area_id': 43,
            'county': null,
            'city': null
          }, {
            'province': '福建省',
            'text': '三明',
            'area_id': 44,
            'county': null,
            'city': null
          }, {
            'province': '福建省',
            'text': '泉州',
            'area_id': 45,
            'county': null,
            'city': null
          }, {
            'province': '福建省',
            'text': '漳州',
            'area_id': 46,
            'county': null,
            'city': null
          }, {
            'province': '福建省',
            'text': '南平',
            'area_id': 47,
            'county': null,
            'city': null
          }, {
            'province': '福建省',
            'text': '龙岩',
            'area_id': 48,
            'county': null,
            'city': null
          }, {
            'province': '福建省',
            'text': '宁德',
            'area_id': 49,
            'county': null,
            'city': null
          }]
        }, {
          'province': '湖北省',
          'city': '',
          'area_id': 21,
          'text': '湖北省',
          'county': '',
          'nodes': [{
            'province': '湖北省',
            'city': '',
            'area_id': 22,
            'text': '武汉',
            'county': '',
            'nodes': [{
              'province': '湖北省',
              'text': '东西湖区',
              'area_id': 23,
              'county': '东西湖区',
              'city': '武汉'
            }, {
              'province': '湖北省',
              'text': '武汉大学',
              'area_id': 53,
              'county': null,
              'city': '武汉'
            }, {
              'province': '湖北省',
              'text': '华中科技',
              'area_id': 58,
              'county': null,
              'city': null
            }]
          }, {
            'province': '湖北省',
            'city': '',
            'area_id': 25,
            'text': '十堰',
            'county': '',
            'nodes': [{
              'province': '湖北省',
              'text': '竹山县',
              'area_id': 66,
              'county': null,
              'city': null
            }, {
              'province': '湖北省',
              'text': '竹溪县',
              'area_id': 70,
              'county': null,
              'city': null
            }, {
              'province': '湖北省',
              'text': '郧西县',
              'area_id': 74,
              'county': null,
              'city': null
            }, {
              'province': '湖北省',
              'text': '湖北汽车工业学院',
              'area_id': 80,
              'county': '茅箭区',
              'city': '十堰'
            }]
          }, {
            'province': '湖北省',
            'text': '黄石',
            'area_id': 27,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '宜昌',
            'area_id': 54,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '鄂州',
            'area_id': 55,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '荆门',
            'area_id': 56,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '孝感',
            'area_id': 57,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '咸宁',
            'area_id': 59,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '随州',
            'area_id': 60,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '恩施自治州',
            'area_id': 61,
            'county': null,
            'city': '恩施'
          }, {
            'province': '湖北省',
            'text': '仙桃',
            'area_id': 62,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '天门',
            'area_id': 63,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '神农架',
            'area_id': 64,
            'county': null,
            'city': null
          }, {
            'province': '湖北省',
            'text': '潜江',
            'area_id': 65,
            'county': null,
            'city': null
          }]
        }, {
          'province': '海南省',
          'city': '地级市',
          'area_id': 100,
          'text': '海南省',
          'county': '县级市',
          'nodes': [{
            'province': '海南省',
            'text': '海口',
            'area_id': 101,
            'county': '县级市',
            'city': '地级'
          }]
        }, {
          'province': '河南省',
          'city': '地级市',
          'area_id': 102,
          'text': '河南省',
          'county': '县级市',
          'nodes': [{
            'province': '河南省',
            'text': '洛阳',
            'area_id': 104,
            'county': '县级市',
            'city': '洛阳'
          }, {
            'province': '河南省',
            'text': '郑州',
            'area_id': 105,
            'county': '县级市',
            'city': '郑州'
          }]
        }, {
          'province': '省份',
          'city': '地级市',
          'area_id': 148,
          'text': '江苏省',
          'county': '市/县级市',
          'nodes': [{
            'province': '江苏省',
            'text': '苏州市',
            'area_id': 149,
            'county': '市/县级市',
            'city': '苏州'
          }, {
            'province': '江苏省',
            'text': '镇江市',
            'area_id': 150,
            'county': '市/县级市',
            'city': '镇江'
          }, {
            'province': '江苏省',
            'text': '虎丘区',
            'area_id': 152,
            'county': '虎丘区',
            'city': '苏州'
          }]
        }, {
          'province': '云南省',
          'city': '昆明市',
          'area_id': 154,
          'text': '云南省',
          'county': '官渡区',
          'nodes': [{
            'province': '云南省',
            'text': '云南省',
            'area_id': 155,
            'county': '宣威市',
            'city': '曲靖市'
          }]
        }, {
          'province': '湖南省',
          'city': '长沙市',
          'area_id': 162,
          'text': '湖南省',
          'county': '长沙市',
          'nodes': [{
            'province': '湖南省',
            'city': '长沙市',
            'area_id': 163,
            'text': '长沙市',
            'county': '长沙市',
            'nodes': [{
              'province': '湖南省',
              'city': '长沙市',
              'area_id': 167,
              'text': '岳麓区',
              'county': '岳麓区',
              'nodes': [{
                'province': '湖南省',
                'text': '涉外经济学院',
                'area_id': 170,
                'county': '岳麓区',
                'city': '长沙市'
              }]
            }, {
              'province': '湖南省',
              'text': '芙蓉区',
              'area_id': 168,
              'county': '芙蓉区',
              'city': '长沙市'
            }, {
              'province': '湖南省',
              'text': '长沙市',
              'area_id': 169,
              'county': '长沙市',
              'city': '长沙市'
            }]
          }, {
            'province': '湖南省',
            'text': '张家界',
            'area_id': 164,
            'county': '县级市',
            'city': '张家界市'
          }, {
            'province': '湖南省',
            'text': '常德市',
            'area_id': 165,
            'county': '县级市',
            'city': '常德市'
          }]
        }, {
          'province': '省份',
          'city': '地级市',
          'area_id': 196,
          'text': '未定义分组电梯',
          'county': '县级市',
          'nodes': [{
            'province': '省份',
            'text': '未分配电梯',
            'area_id': 217,
            'county': '县级市',
            'city': '地级市'
          }]
        }, {
          'province': '新疆',
          'city': '',
          'area_id': 203,
          'text': '新疆',
          'county': '',
          'nodes': [{
            'province': '新疆',
            'city': '乌鲁木齐市',
            'area_id': 204,
            'text': '乌鲁木齐',
            'county': '天山区',
            'nodes': [{
              'province': '新疆',
              'city': '乌鲁木齐市',
              'area_id': 205,
              'text': '新市区',
              'county': '乌鲁木齐',
              'nodes': [{
                'province': '新疆',
                'text': '飞机场',
                'area_id': 210,
                'county': '新市区',
                'city': '乌鲁木齐市'
              }, {
                'province': '新疆',
                'text': '送变电小区',
                'area_id': 216,
                'county': '新市区',
                'city': '乌鲁木齐市'
              }, {
                'province': '新疆',
                'text': '乌鲁木齐环境监测中心',
                'area_id': 218,
                'county': '新市区',
                'city': '乌鲁木齐市'
              }]
            }]
          }]
        }, {
          'province': '山东省',
          'city': '',
          'area_id': 207,
          'text': '山东',
          'county': '',
          'nodes': [{
            'province': '山东省',
            'city': '',
            'area_id': 208,
            'text': '烟台市',
            'county': '',
            'nodes': [{
              'province': '山东省',
              'text': '',
              'area_id': 209,
              'county': '县级市',
              'city': '烟台市'
            }]
          }]
        }]
      }]
    }
    
    export default {
      components: {
        // 这里别忘了注册子组件
        myTrees
      },
      data () {
        return {
          treeData
        }
      },
      methods: {}
    }
    </script>
    
    <style scoped>
    </style>
    

    完成上述代码后,你应该可以看到效果,笔者对于框架的使用还是很赞同的,但是如果遇到项目中需要使用树形组件,而使用的ui框架中恰巧没有,总不能直接把element-ui整个加载到项目中吧,所以自己造造轮子还是很有必要的。

    树形组件的封装就这些了,如果使用中遇到问题,欢迎留言。若有需要改进的地方,欢迎指正~

    展开全文
  • 树形菜单是开发后台管理系统都绕不过的一个需求,也是...今天,我就基于Vue用两种方式来实现树形菜单。准备工作Vue开发环境父组件.png树形结构的数据data: [{name: 'home',path: '/home',isExpand: false,meta: { t...

    树形菜单是开发后台管理系统都绕不过的一个需求,也是各种UI框架都必须具备的组件。实际开发中,大多数时候都是直接拿别人的轮子过来用,但作为一个有追求的程序猿怎么能不知道轮子背后的东西呢?今天,我就基于Vue用两种方式来实现树形菜单。

    准备工作

    Vue开发环境

    父组件.png

    树形结构的数据

    data: [

    {

    name: 'home',

    path: '/home',

    isExpand: false,

    meta: { text: '首页' }

    },

    {

    name: 'manage',

    path: '/manage',

    isExpand: false,

    meta: {text: '系统管理'},

    children: [

    {

    name: 'staff',

    path: 'staff',

    isExpand: false,

    meta: {text: '员工管理'}

    },

    {

    name: 'role',

    path: 'role',

    isExpand: false,

    meta: {text: '角色管理'}

    },

    {

    name: 'auth',

    path: 'auth',

    isExpand: false,

    meta: {text: '权限管理'}

    },

    {

    name: 'daily',

    path: 'daily',

    isExpand: false,

    meta: {text: '日常管理'},

    children: [

    {

    name: 'attendance',

    path: 'attendance',

    isExpand: false,

    meta: {text: '考勤管理'},

    },

    {

    name: 'performance',

    path: 'performance',

    isExpand: false,

    meta: {text: '绩效管理'}

    }

    ]

    }

    ]

    },

    {

    name: 'finance',

    path: '/finance',

    isExpand: false,

    meta: {text: '财务管理'},

    children: [

    {

    name: 'income',

    path: 'income',

    isExpand: false,

    meta: {text: '收入管理'},

    },

    {

    name: 'expense',

    path: 'expense',

    isExpand: false,

    meta: {text: '支出管理'},

    }

    ]

    }

    ]

    两种实现

    1、递归组件

    // 子组件

    • @click="handleClick(item)">{{item.meta.text}}

    export default {

    name: 'TreeOne',

    props: {

    treeData: {

    type: Array,

    default: () => {

    return []

    }

    }

    },

    methods: {

    handleClick(){}

    }

    }

    2、render函数

    // 子组件

    import img1 from '../assets/img/icon_arrow_right.png'

    import img2 from '../assets/img/icon_arrow_down.png'

    export default {

    name: 'TreeTwo',

    props: {

    treeData: {

    type: Array,

    default: () => {

    return []

    }

    }

    },

    render(r){

    return this.elements(this.treeData,r)

    },

    methods: {

    elements(data,r){

    return r('ul',[

    data.map(item => {

    if (item.children && item.children.length > 0) {

    return r('li',{

    'class': {

    active: !(item.children && item.children.length > 0)

    }

    },[

    r('span',{

    'class':'item'

    },[

    r('span',{

    'class': 'icon',

    on:{

    click: () => {

    item.isExpand = !item.isExpand

    }

    }

    },[

    r('img',{

    attrs: {

    src: item.children && item.children.length > 0 && !item.isExpand ?

    img1 : (item.children && item.children.length > 0 && item.isExpand ? img2 : '')

    }

    })

    ]),

    r('span',{

    'class': 'title',

    on: {

    click: () => {

    }

    }

    },item.meta.text,)

    ]),

    // 递归调用

    item.isExpand ? this.elements(item.children,r): null

    ])

    } else {

    return r('li',item.meta.text)

    }

    })

    ])

    }

    }

    }

    实现效果

    效果.png

    以上就是用两种方式实现的树组件,重点在于递归的思想,希望对读者有所帮助。详情可以查看源代码:源码

    展开全文
  • Vue实现树形结构,不采用tree组件,利用循环方式得到;实现全选,勾选父节点自动勾选子节点,勾选子节点反勾选相应父节点功能
  • 主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 学习vue有一段时间了,最近使用vue做了一套后台管理系统,其中使用最多就是递归组件,下面这篇文章主要给大家介绍了关于Vue利用递归实现树形菜单的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
  • 主要为大家详细介绍了Vue2递归组件实现树形菜单的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 基于vue封装的树形菜单,已实现单选、复选、级联中选、单选前回调、单选事件、复选事件,异步加载等功能,简单好用
  • 主要为大家详细介绍了Vue2组件tree实现无限级树形菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 之前博客里分享过一篇用《Angular 实现树形菜单(多级菜单)功能模块》,而在由于战略转移,所以我给 Vue 也来了一份。功能差不多,不过由于这个是第二次做,会对之前的一些不足作一个修正。下面来看看 Vue 树形菜单...
  • 主要介绍了Vue 实现树形视图数据功能,利用简单的树形视图实现的,在实现过程中熟悉了组件的递归使用,感兴趣的朋友跟随脚本之家小编一起学习吧
  • 最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单。 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '...
  • 通过本文给您演示一下如何有效地使用递归组件,我将通过建立一个可扩展/收缩的树形菜单的来一步步进行。下面通过本文给大家分享用 Vue.js 递归组件实现可折叠的树形菜单,需要的朋友参考下吧
  • Vue实现树形下拉菜单

    2022-08-26 14:37:28
    基于vue生成树形下拉菜单,结合el-select和el-tree来实现。做个记录吧,避免后续遇到问题一时间又得查文档。searchForm是我的查询参数。下面讲解下具体方法是做什么的。treeList是数据信息。...
  • 一个完整的树形菜单demo,下载即可运行,包含node_module包,使用vue+el-menu完成多层树形菜单。内含模拟数据格式。
  • 基于vue.js实现树形表格的封装(vue-tree-table)
  • 基于vue封装的树形菜单,已实现单选、复选、级联中选、单选前回调、单选事件、复选事件,异步加载等功能,简单好用,欢迎下载demo。 基于vue封装的树形菜单,已实现单选、复选、级联中选、单选前回调、单选事件、...
  • 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法。 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据...
  • vue+java 实现树形菜单

    2020-12-04 16:31:17
    目前项目有个实现物料档案查询的功能,其中树形菜单没做过。研究了一上午,使用ant-vue加java实现。 与大家分享一下。 一、数据库设计 必要字段: id: 主键 pid: 父id title: 名称 level:级别,1为跟级别 二、...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,348
精华内容 939
关键字:

vue实现树形菜单