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

实现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: []
}
];

vue 树形数据增加属性并计算树节点的深度的更多相关文章

  1. Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计

    实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述 如上图, 1.点击左侧树,叶子 ...

  2. Vue.js-05:第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  3. table-tree 表格树、树形数据处理、数据转树形数据

    前言 公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用. 用出来只用表格没有树,研究半天没研究个所以然,只能从新找个 npm里找到一个:vue-table-with-tree-g ...

  4. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  5. Vue(基础三)_监听器与计算属性

    一.前言 本文主要涉及:     1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...

  6. Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别

    1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...

  7. Vue 学习笔记 — css属性计算的问题

    简书 今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果. 例子: https://jsfiddle.net/blqw/cLwau40z/ 上面的页面 ...

  8. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  9. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

随机推荐

  1. InstallShield 2013 Limited Edition for Visual Studio

    新建打包项目后,解决方案资源管理器中的结构如下: Project Assistant界面如下: 在Project Assistant中按照步骤创建打包项目: 1.Application Informa ...

  2. 痞子衡嵌入式:超级下载算法(RT-UFL)开发笔记(4) - 轮询Flash配置参数

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是超级下载算法开发笔记(4)之轮询Flash配置参数. 文接上篇 <超级下载算法(RT-UFL)开发笔记(3) - 统一FlexSP ...

  3. μC/OS-III---I笔记9---任务等待多个内核对象和任务内建信号量与消息队列

    在一个任务等待多个内核对象在之前,信号量和消息队列的发布过程中都有等待多个内核对象判断的函数,所谓任务等待多个内核对象顾名思义就是一任务同时等待多个内核对象而被挂起,在USOC-III中一个任务等待多 ...

  4. 高并发之Phaser、ReadWriteLock、StampedLock

    本系列研究总结高并发下的几种同步锁的使用以及之间的区别,分别是:ReentrantLock.CountDownLatch.CyclicBarrier.Phaser.ReadWriteLock.Stam ...

  5. reCAPTCHA OCR 详解 , 验验证, OCR(光学自动识别)

    WEB安全专题 ‍‍reCAPTCHA的诞生及意义‍‍ CMU(卡耐基梅隆大学)设计了一个名叫reCAPTCHA的强大系统,让电脑去向人类求助.具体做法是:将OCR(光学自动识别)软件无法识别的文字扫 ...

  6. CSS 滚动条宽度 All In One

    CSS 滚动条宽度 All In One 滚动条宽度 IE 16px Chrome 12px scrollbar width bug 改变设计稿的宽度,没考虑到 scrollbar width sol ...

  7. node.js 怎么扩大默认的分配的最大运行内存

    node.js 怎么扩大默认的分配的最大运行内存 $ node --max-old-space-size=4096 app.js $ NODE_OPTIONS=--max-old-space-size ...

  8. how to input special symbol in macOS

    how to input special symbol in macOS 如何在 macOS 中输入特殊符号 1024 ≈ 1000 2^10 == 1024 约等于 1000, 方便用来表示 Opt ...

  9. Arctic Code Vault Contributor

    Arctic Code Vault Contributor GitHub Archive Program https://archiveprogram.github.com/ Preserving o ...

  10. RocketMq灰皮书(三)------MQ使用

    RocketMq灰皮书(三)------MQ使用 在使用MQ之前,我们回顾一下前两篇博文的内容. 我们大致了解了RocketMQ的四个概念,分别是:Producer,Consumer,Message和 ...