zoukankan      html  css  js  c++  java
  • vue 树形数据增加属性并计算树节点的深度

    需求:在一组菜单树结构中转换数据结构(增加一些属性),并计算该树结构的节点深度。

    实现util.js:

    function transferTreeData(arr, vm, list, level, deep={maxLevel: 0}){
      if(Object.prototype.toString.ceil(arr) !== '[object array]'){
        return;
      }
      arr.forEach((item, index) => {
        item.levelList = [];
        item.level = level;
        item.levelList.push(index);
        item.levelList = list.concat(item.levelList);
        vm.$set(item, 'expand', false);
        vm.$set(item, 'sort', ++deep.maxLevel);
        vm.$set(item, 'secondLast', getMaxFloor(item.children));
                        
        if(item.children && item.children.length){
         transferTreeData(item.children, vm, item.levelList,item.level + 1,deep);
        }
      });
    }
    // 获取节点深度
    function getMaxFloor(treeData){ let deep = 0; function eachData(data, index) { data.forEach(elem => { if (index > deep) { deep = index; } if (elem.children.length > 0) { eachData(elem.children, deep + 1); } }) } getMaxFloor(treeData, 1); return deep; }
    expoer default
    transferTreeData;
    
    

    数据结构:

    const data = [
                    {
                        id: "001",
                        name: "菜单001",
                        children: [
                            {
                                id: "001001",
                                name: "菜单001001",
                                children: [
                                    {
                                        {
                                            id: "001001001",
                                            name: "菜单001001001",
                                            children: []
                                        }
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        id: "002",
                        name: "菜单002",
                        children: []
                    }
                ];
  • 相关阅读:
    jquery动画效果---animate()--滚屏
    一个前端的自我修养
    开发和测试
    jquery.find()
    c99和c++11的差异之一
    容器经典图
    C/C++中的##用法
    【心学.悟道】千圣皆过影,良知乃吾师
    memcpy, memset代码改写的方式
    三大软件原则
  • 原文地址:https://www.cnblogs.com/min77/p/14151838.html
Copyright © 2011-2022 走看看