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: []
}
];
vue 树形数据增加属性并计算树节点的深度的更多相关文章
- Easyui 实现点击不同树节点打开不同tab页展示不同datagrid表数据设计
实现点击不同树节点打开不同tab页展示不同datagrid表数据设计 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求描述 如上图, 1.点击左侧树,叶子 ...
- Vue.js-05:第五章 - 计算属性与监听器
一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...
- table-tree 表格树、树形数据处理、数据转树形数据
前言 公司想搞个表格树的展示页面,看着element有个表格树,还以为可以用. 用出来只用表格没有树,研究半天没研究个所以然,只能从新找个 npm里找到一个:vue-table-with-tree-g ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- Vue(基础三)_监听器与计算属性
一.前言 本文主要涉及: 1.watch()监听单个属性 2.computed可以监听多个属性 3.点击li标签切换音乐案例 二.主要内容 1.watch()监听器(监听单一数据) (1)监听 ...
- Vue中methods(方法)、computed(计算属性)、watch(侦听器)的区别
1.computed和methods 共同点:computed能现实的methods也能实现: 不同点:computed是基于它的依赖进行缓存的.computed只有在它的相关依赖发生变化才会重新计算 ...
- Vue 学习笔记 — css属性计算的问题
简书 今天在使用Vue时遇到一个问题:在切换css内联属性时某些特殊属性的计算会有问题,无法得到预期的结果. 例子: https://jsfiddle.net/blqw/cLwau40z/ 上面的页面 ...
- Web中树形数据(层级关系数据)的实现—以行政区树为例
在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...
- 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理
在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...
随机推荐
- 由CloudStack项目引起的ESXI嵌套虚拟化引起的二级虚拟机无法被访问
关于这个问题,主要以文字描述为主,最终解决方法其实就一个步骤. 问题描述: 某客户需要部署某企业的云平台,但是由于年前没有足够的物理机资源,所以提供的资源均为虚拟机,现在让我们做技术评估. 其实观察整 ...
- HDU 3949 XOR (线性基第k小)题解
题意: 给出\(n\)个数,求出子集异或第\(k\)小的值,不存在输出-1. 思路: 先用线性基存所有的子集,然后对线性基每一位进行消元,保证只有\(d[i]\)的\(i\)位存在1,那么这样变成了一 ...
- PDF transform to PPT online & free
PDF transform to PPT online & free > Speaker Deck Share Presentationswithout the Mess Speaker ...
- H5 广告落地页
H5 广告落地页 Landing Page 用于承接通过付费搜索渠道点击进入的用户,所以叫落地页 什么是登陆页面? 在数字营销中,登录页面是专门为营销或广告活动创建的独立网页. 访问者单击电子邮件中的 ...
- js 实现简单的parseInt和parseFloat
function myParseInt(str: string): number { let result = NaN; for (let i = 0; i < str.length; i++) ...
- 人物传记Kyle Tedford:数据环境生变,银行大数据风控怎么办?
数据是金融业务的基石,监管集中清查大数据公司,很多东西在发生根本性改变,资金方做"甩手掌柜"的好日子不会重现.那些缺乏自主风控能力的金融机构,在未来的行业竞争中,恐无以立足了.近日 ...
- BGV再度爆发,流通市值破500万美金!
BGV似乎以超乎寻常的姿态,开启了爆发的模式.这两天,BGV一路上涨,日内最高涨至548.78美金,24小时成交额达到了98.07万美金,24小时成交量达到1844.93枚BGV,流通市值更是突破了5 ...
- linux驱动系列之程序反汇编
摘抄网页:http://www.169it.com/article/330129798173630299.html 参考网页:http://www.cppblog.com/liu1061/articl ...
- 010_HTML5
目录 初识HTML 什么是HTML HTML发展史 HTML5的优势 W3C标准 常见IDE IDEA开发HTML IDEA创建HTML文件,并用浏览器打开 配置浏览器 HTML基础 HTML基本结构 ...
- DisplayFormat属性
DataFormatString="{0:格式字符串}" 在DataFormatString 中的 {0} 表示数据本身,而在冒号后面的格式字符串代表所们希望数据显示的格式: 数字 ...