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

实现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. OpenStack Train版-1.安装基础环境&服务

    1. 服务组件的密码 密码名称 描述 ADMIN_PASS admin用户密码 CINDER_DBPASS 块设备存储服务的数据库密码 CINDER_PASS 块设备存储服务的 cinder 密码 D ...

  2. DOCKER - 构建一个docker镜像并跑起来

    一.有个基础镜像 1.基础镜像的选择 当前市场有众多可选择的基础docker镜像,可参考: https://blog.csdn.net/nklinsirui/article/details/80967 ...

  3. 缓冲区溢出实验 4 内存管理(类似于malloc free)

    实验环境.代码.及准备 https://www.cnblogs.com/lqerio/p/12870834.html vul4 观察foo函数,可见问题在于最后一次tfree(q).由于之前已经tfr ...

  4. 51nod 1384 可重集的全排列

    对于1231,121,111等有重复的数据,我们怎么做到生成全排列呢 实际上,对于打标记再释放标记的这种方法,如果一开始第一层递归访问过1那么你再访问 就会完全重复上一次1开头的情况,那么递归地考虑这 ...

  5. CDN 工作原理剖析

    CDN 工作原理剖析 CDN / Content Delivery Network / 内容分发网络 https://www.cloudflare.com/zh-cn/learning/cdn/wha ...

  6. PWA All In One

    PWA All In One chrome://apps/ PWA Progressive Web App 可安装,添加到主屏 离线使用 轻量,快速 基于 Web 技术一套代码多端复用(移动端,桌面端 ...

  7. nasm astrcat_s函数 x86

    xxx.asm %define p1 ebp+8 %define p2 ebp+12 %define p3 ebp+16 section .text global dllmain export ast ...

  8. NGK Global莫斯科路演:关注内存暴涨和Defi新项目-Baccarat

    此次路演由莫斯科演讲师Andrew首先致辞.首先安德鲁回顾了NGK近些年发展的整体情况,表示,NGK技术团队一直在认真的做事并将更加注重技术方案的改进,为行业提供更好的技术解决方案是NGK的愿景,NG ...

  9. redis缓存穿透穿透解决方案-布隆过滤器

    redis缓存穿透穿透解决方案-布隆过滤器 我们先来看一段代码 cache_key = "id:1" cache_value = GetValueFromRedis(cache_k ...

  10. Flannel和Calico网络插件工作流程对比

    Flannel和Calico网络插件对比   Calico简介 Calico是一个纯三层的网络插件,calico的bgp模式类似于flannel的host-gw Calico方便集成 OpenStac ...