vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)
目录
- 深度优先遍历多层数组对象
- 比如树结构是这样的
- vue遍历包含数组的对象
- 请求来拿到后数据格式是下面这种
- 最终在html中这样遍历
深度优先遍历多层数组对象
这个方法如果是对于下面的三级树的话可以拿到爷爷Id，自己Id，父亲Id；其实如果想要拿到label的话就把data.id换成data.label就行了
function treeFindPath(tree, func, path = []) {
if (!tree) return []
for (const data of tree) {
path.push(data.id)
if (func(data)) return path
if (data.children) {
const findChildren = treeFindPath(data.children, func, path)
if (findChildren.length) return findChildren
}
path.pop()
}
return []
}
const i = treeFindPath(this.treeData, node => node.label === result)
比如树结构是这样的
这相当于是多可三级树
"data": [
{
"id": "1",
"label": "能动中心",
"type": "1",
"children": [
{
"id": "11",
"label": "罐底视频",
"type": "2",
"children": [
{
"id": "111",
"type": "3",
"label": "四高炉6道"
},
{
"id": "112",
"type": "3",
"label": "西渣罐底"
}
]
},
{
"id": "12",
"label": "煤气柜站",
"type": "2",
"children": [
{
"id": "121",
"type": "3",
"label": "13号道口02"
},
{
"id": "122",
"type": "3",
"label": "13号道口01"
},
{
"id": "123",
"type": "3",
"label": "能动中心楼顶"
}
]
},
{
"id": "13",
"label": "能动中心楼顶",
"type": "2",
"children": [
{
"id": "131",
"type": "3",
"label": "44455666"
}
]
}
]
},
{
"id": "2",
"label": "炼铁厂",
"type": "1",
"children": [
{
"id": "21",
"label": "星云智联",
"type": "2",
"children": [
{
"id": "211",
"type": "3",
"label": "程控楼3楼"
},
{
"id": "212",
"type": "3",
"label": "程控楼1楼过道西侧"
},
{
"id": "213",
"type": "3",
"label": "程控楼2楼大厅"
},
{
"id": "214",
"type": "3",
"label": "公司主楼5楼西侧"
}
]
},
{
"id": "22",
"label": "翻车机溜车线区域",
"type": "2",
"children": [
{
"id": "221",
"type": "3",
"label": "炼钢球罐全貌1"
}
]
},
{
"id": "23",
"label": "焦化化产作业区",
"type": "2",
"children": [
{
"id": "231",
"type": "3",
"label": "4#万立储槽全貌"
},
{
"id": "232",
"type": "3",
"label": "4#万立中压氧压机"
},
{
"id": "233",
"type": "3",
"label": "4#万立变电所低压室"
}
]
}
]
},
{
"id": "3",
"label": "炼钢厂",
"type": "1",
"children": [
{
"id": "31",
"label": "熔融金属及吊运区域",
"type": "2",
"children": [
{
"id": "311",
"type": "3",
"label": "8号吊点鞍马座"
},
{
"id": "312",
"type": "3",
"label": "8号起吊点右"
}
]
},
{
"id": "32",
"label": "区域监控",
"type": "2",
"children": [
{
"id": "321",
"type": "3",
"label": "测试点33"
},
{
"id": "322",
"type": "3",
"label": "原料跨1"
},
{
"id": "323",
"type": "3",
"label": "板坯LH钒铁柜"
}
]
},
{
"id": "33",
"label": "罐号识别",
"type": "2",
"children": [
{
"id": "331",
"type": "3",
"label": "修罐间东头"
}
]
}
]
},
{
"id": "4",
"label": "冷轧厂",
"type": "1",
"children": [
{
"id": "41",
"label": "轧钢作业区",
"type": "2",
"children": [
{
"id": "411",
"type": "3",
"label": "轧机主控室"
}
]
},
{
"id": "42",
"label": "普冷作业区",
"type": "2",
"children": [
{
"id": "421",
"type": "3",
"label": "原料库1"
},
{
"id": "422",
"type": "3",
"label": "原料库2"
}
]
},
{
"id": "43",
"label": "镀锌作业区",
"type": "2",
"children": [
{
"id": "431",
"type": "3",
"label": "生产运行检测"
},
{
"id": "432",
"type": "3",
"label": "轧机高压室"
}
]
},
{
"id": "44",
"label": "点检维护作业区",
"type": "2",
"children": [
{
"id": "441",
"type": "3",
"label": "退火炉4"
},
{
"id": "442",
"type": "3",
"label": "退火炉1"
}
]
}
]
}
]
vue遍历包含数组的对象
最近开发自己博客，在遍历对象类型数据时候，怎么也拿不到，尝试过两层遍历都不行，最终利用巧计解决了，记录下来：
请求来拿到后数据格式是下面这种
data(){
return{
noticeList:{
notice:["aaaaa","bbbb","cccc"],
times:[1564707990252,1564708337658,1564707990252]
},
}
},
最终在html中这样遍历
<li v-for="(text,index) in noticeList.notice" :key="index">
{{text}}<span>{{noticeList.times[index] | formatDate}}</span>
</li>
最重要的一点是要对象中两个数组的index对应的值是相对应的值。遍历对象中其中一个数组，另外一个数组用遍历过程中的index来获取其中对应的值，非常巧妙的一个办法。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue中的循环遍历对象、数组和字符串
目录 vue循环遍历对象.数组和字符串 1.循环遍历对象 2.循环遍历数组 3.循环遍历字符串 vue循环遍历,指令v-for 1.循环遍历 2.v-for遍历数组 3.v-for遍历对象 4.v-for使用中添加key vue循环遍历对象.数组和字符串 1.循环遍历对象 1.1vue 在html里面循环遍历对象 v-for=" (val, key , i) in dimItemMap" :key="key" val-每一项 key -key值 i-第几个 <
-
Vue中对数组和对象进行遍历和修改方式
目录 对数组和对象进行遍历和修改 1.对数组进行循环 2. 修改数组的时候,不能直接通过下标去增加修改删除 3.对对象进行循环 4.增加对象的时候 修改数组和对象的特殊情况以及修改方法 修改数组的两个特殊情况 修补方法 对数组和对象进行遍历和修改 1.对数组进行循环 v-for进行循环,有两个参数(item,index) 注意:template可以成为占位符,在DOM里面不显示 2. 修改数组的时候,不能直接通过下标去增加修改删除 (1)可以用过push/pop/shift/unshift/sp
-
vue遍历对象中的数组取值示例
前几天小项目,没考虑周全,让后端改接口,改成数组中包含对象中包含数组的形式,后来越琢磨越不对,后台把所有数据放在了一个对象里,我拿弹窗数据不好拿,索性又改了回来,把后端折腾够呛,自己也折腾够呛,发上来,以示警戒 改前拿数据 <div class='your-container'> <div class="sortText"> <div>综合排序</div> <div class="sortHot" @click=
-
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
本文实例讲述了Vue指令v-for遍历输出JavaScript数组及json对象的常见方式.分享给大家供大家参考,具体如下: 定义数据: <script> new Vue({ el:"#test", data:{ message:"infor", list:["a","b","c","d","e"], web:{ "百度":"
-
vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)
目录 深度优先遍历多层数组对象 比如树结构是这样的 vue遍历包含数组的对象 请求来拿到后数据格式是下面这种 最终在html中这样遍历 深度优先遍历多层数组对象 这个方法如果是对于下面的三级树的话可以拿到爷爷Id,自己Id,父亲Id:其实如果想要拿到label的话就把data.id换成data.label就行了 function treeFindPath(tree, func, path = []) { if (!tree) return [] for (cons
-
JQuery $.each遍历JavaScript数组对象实例
查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName":"banana&q
-
vue+element获取el-table某行的下标,根据下标操作数组对象方式
1.在vue中对数组中的某个对象进行操作时(替换.删除),都需要用到该对象在数组中的下标. 前端代码: scope.$index :获取当前行的下标 scope.row:获取当前行的对象 效果图: 思路:通过点击事件将该对象在数组中的下标传递到方法中,然后对数组进行操作 即可根据下标删除数组中对应的对象. 补充知识:vue-element-upload 文件上传打开选择文件弹框前进行提示或操作 在项目中使用文件上传功能时,需求是不能直接弹出弹框,要先二次确认或进行提示.引申开来,即可在打开选择文
-
vue.set向对象里增加多层数组属性不生效问题及解决
目录 属性多层数组数据的添加修改 为什么需要使用Vue.set? 最近项目中使用到了树形表格 向对象数组中添加新属性 属性多层数组数据的添加修改 为什么需要使用Vue.set? vue中不能检测到数组的一些变化 比如一下两种: 1.数组长度的变化 vm.arr.length = 100 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ 那么为什么vue要做成这样,不去监听数组的变化,数组在日常中使用频率还是比较高的,这个问题其实尤大说过,是为了性能,假设我们新建了一个数组,长度是10
-
React循环遍历渲染数组和对象元素方式
目录 循环遍历渲染数组和对象元素 遍历渲染数组 遍历渲染对象元素 遍历对象生成dom 项目场景 问题描述 补充 循环遍历渲染数组和对象元素 遍历渲染数组 1.单纯数组 const pureArr = ['a','b','c','d'] //假如我们想将上面的数组利用react渲染成一个列表,代码如下:{ {pureArr.map(item => ( <li key={item}>item</li> ))} 以上代码在codesandbox中运行结果如下: 2. 对象数组 co
-
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
本文实例讲述了vue.js基于v-for实现批量渲染 Json数组对象列表数据.分享给大家供大家参考,具体如下: Vuejs的出现减轻了对DOM的直接操作,同时它提供的 v-for 渲染列表数据也给我们提供了很大的方便.即使是复杂的 Json数组对象,也可以使用 多层嵌套的 v-for 实现,格式如下: <div v-for="(item,index) in items"> <div v-for="(list,index) in item.lists&quo
-
jquery遍历筛选数组的几种方法和遍历解析json对象
jquery grep()筛选遍历数组 复制代码 代码如下: $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value){ return value > 5;//筛选出大于5的 }); for(var i=0;i<filterarray.length;i++){ alert(filterarray[i]); } for (key in filtera
-
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
-
Vue中遍历数组的新方法实例详解
1.foreach foreach循环对不能使用return来停止循环 search(keyword){ var newList = [] this.urls.forEach(item =>{ if(item.name.indexOf(keyword) != -1){ newList.push(item) } }) return newList } 2.filter item对象就是遍历数组中的一个元素,includes是es6中的新方法,在search方法中直接返回新数组 search(key
-
vue 解决遍历对象显示的顺序不对问题
一.情况说明:在wacth里面生成了一个日期字符串的的数组(如下图1),如果遍历这个数组生成一个以日期为key的Object,但是数组里面的元素顺序和Object的属性的顺序是不一样的,并且在vue模板中遍历这个Object并显示key,得到的是数组的元素顺序(如下图2)! 图1 图2 二.过程分析:问题出在了遍历数组得到对象上,这个时候的顺序变了 三.解决方法:先给数组排序,在遍历得到对象 文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出! 以上这篇vue 解决遍历对象显示的顺序不