经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue深度优先遍历多层数组对象方式(相当于多棵树、三级树)
来源:jb51  时间:2022/8/23 11:27:06  对本文有异议

深度优先遍历多层数组对象

这个方法如果是对于下面的三级树的话可以拿到爷爷Id,自己Id,父亲Id;其实如果想要拿到label的话就把data.id换成data.label就行了

  1. function treeFindPath(tree, func, path = []) {
  2. ? ? ? ? if (!tree) return []
  3. ? ? ? ? for (const data of tree) {
  4. ? ? ? ? ? path.push(data.id)
  5. ? ? ? ? ? if (func(data)) return path
  6. ? ? ? ? ? if (data.children) {
  7. ? ? ? ? ? ? const findChildren = treeFindPath(data.children, func, path)
  8. ? ? ? ? ? ? if (findChildren.length) return findChildren
  9. ? ? ? ? ? }
  10. ? ? ? ? ? path.pop()
  11. ? ? ? ? }
  12. ? ? ? ? return []
  13. ? ? ? }
  14. ? ? ? const i = treeFindPath(this.treeData, node => node.label === result)

比如树结构是这样的

这相当于是多可三级树

  1. ?"data": [
  2. ? ? {
  3. ? ? ? "id": "1",
  4. ? ? ? "label": "能动中心",
  5. ? ? ? "type": "1",
  6. ? ? ? "children": [
  7. ? ? ? ? {
  8. ? ? ? ? ? "id": "11",
  9. ? ? ? ? ? "label": "罐底视频",
  10. ? ? ? ? ? "type": "2",
  11. ? ? ? ? ? "children": [
  12. ? ? ? ? ? ? {
  13. ? ? ? ? ? ? ? "id": "111",
  14. ? ? ? ? ? ? ? "type": "3",
  15. ? ? ? ? ? ? ? "label": "四高炉6道"
  16. ? ? ? ? ? ? },
  17. ? ? ? ? ? ? {
  18. ? ? ? ? ? ? ? "id": "112",
  19. ? ? ? ? ? ? ? "type": "3",
  20. ? ? ? ? ? ? ? "label": "西渣罐底"
  21. ? ? ? ? ? ? }
  22. ? ? ? ? ? ]
  23. ? ? ? ? },
  24. ? ? ? ? {
  25. ? ? ? ? ? "id": "12",
  26. ? ? ? ? ? "label": "煤气柜站",
  27. ? ? ? ? ? "type": "2",
  28. ? ? ? ? ? "children": [
  29. ? ? ? ? ? ? {
  30. ? ? ? ? ? ? ? "id": "121",
  31. ? ? ? ? ? ? ? "type": "3",
  32. ? ? ? ? ? ? ? "label": "13号道口02"
  33. ? ? ? ? ? ? },
  34. ? ? ? ? ? ? {
  35. ? ? ? ? ? ? ? "id": "122",
  36. ? ? ? ? ? ? ? "type": "3",
  37. ? ? ? ? ? ? ? "label": "13号道口01"
  38. ? ? ? ? ? ? },
  39. ? ? ? ? ? ? {
  40. ? ? ? ? ? ? ? "id": "123",
  41. ? ? ? ? ? ? ? "type": "3",
  42. ? ? ? ? ? ? ? "label": "能动中心楼顶"
  43. ? ? ? ? ? ? }
  44. ? ? ? ? ? ]
  45. ? ? ? ? },
  46. ? ? ? ? {
  47. ? ? ? ? ? "id": "13",
  48. ? ? ? ? ? "label": "能动中心楼顶",
  49. ? ? ? ? ? "type": "2",
  50. ? ? ? ? ? "children": [
  51. ? ? ? ? ? ? {
  52. ? ? ? ? ? ? ? "id": "131",
  53. ? ? ? ? ? ? ? "type": "3",
  54. ? ? ? ? ? ? ? "label": "44455666"
  55. ? ? ? ? ? ? }
  56. ? ? ? ? ? ]
  57. ? ? ? ? }
  58. ? ? ? ]
  59. ? ? },
  60. ? ? {
  61. ? ? ? "id": "2",
  62. ? ? ? "label": "炼铁厂",
  63. ? ? ? "type": "1",
  64. ? ? ? "children": [
  65. ? ? ? ? {
  66. ? ? ? ? ? "id": "21",
  67. ? ? ? ? ? "label": "星云智联",
  68. ? ? ? ? ? "type": "2",
  69. ? ? ? ? ? "children": [
  70. ? ? ? ? ? ? {
  71. ? ? ? ? ? ? ? "id": "211",
  72. ? ? ? ? ? ? ? "type": "3",
  73. ? ? ? ? ? ? ? "label": "程控楼3楼"
  74. ? ? ? ? ? ? },
  75. ? ? ? ? ? ? {
  76. ? ? ? ? ? ? ? "id": "212",
  77. ? ? ? ? ? ? ? "type": "3",
  78. ? ? ? ? ? ? ? "label": "程控楼1楼过道西侧"
  79. ? ? ? ? ? ? },
  80. ? ? ? ? ? ? {
  81. ? ? ? ? ? ? ? "id": "213",
  82. ? ? ? ? ? ? ? "type": "3",
  83. ? ? ? ? ? ? ? "label": "程控楼2楼大厅"
  84. ? ? ? ? ? ? },
  85. ? ? ? ? ? ? {
  86. ? ? ? ? ? ? ? "id": "214",
  87. ? ? ? ? ? ? ? "type": "3",
  88. ? ? ? ? ? ? ? "label": "公司主楼5楼西侧"
  89. ? ? ? ? ? ? }
  90. ? ? ? ? ? ]
  91. ? ? ? ? },
  92. ? ? ? ? {
  93. ? ? ? ? ? "id": "22",
  94. ? ? ? ? ? "label": "翻车机溜车线区域",
  95. ? ? ? ? ? "type": "2",
  96. ? ? ? ? ? "children": [
  97. ? ? ? ? ? ? {
  98. ? ? ? ? ? ? ? "id": "221",
  99. ? ? ? ? ? ? ? "type": "3",
  100. ? ? ? ? ? ? ? "label": "炼钢球罐全貌1"
  101. ? ? ? ? ? ? }
  102. ? ? ? ? ? ]
  103. ? ? ? ? },
  104. ? ? ? ? {
  105. ? ? ? ? ? "id": "23",
  106. ? ? ? ? ? "label": "焦化化产作业区",
  107. ? ? ? ? ? "type": "2",
  108. ? ? ? ? ? "children": [
  109. ? ? ? ? ? ? {
  110. ? ? ? ? ? ? ? "id": "231",
  111. ? ? ? ? ? ? ? "type": "3",
  112. ? ? ? ? ? ? ? "label": "4#万立储槽全貌"
  113. ? ? ? ? ? ? },
  114. ? ? ? ? ? ? {
  115. ? ? ? ? ? ? ? "id": "232",
  116. ? ? ? ? ? ? ? "type": "3",
  117. ? ? ? ? ? ? ? "label": "4#万立中压氧压机"
  118. ? ? ? ? ? ? },
  119. ? ? ? ? ? ? {
  120. ? ? ? ? ? ? ? "id": "233",
  121. ? ? ? ? ? ? ? "type": "3",
  122. ? ? ? ? ? ? ? "label": "4#万立变电所低压室"
  123. ? ? ? ? ? ? }
  124. ? ? ? ? ? ]
  125. ? ? ? ? }
  126. ? ? ? ]
  127. ? ? },
  128. ? ? {
  129. ? ? ? "id": "3",
  130. ? ? ? "label": "炼钢厂",
  131. ? ? ? "type": "1",
  132. ? ? ? "children": [
  133. ? ? ? ? {
  134. ? ? ? ? ? "id": "31",
  135. ? ? ? ? ? "label": "熔融金属及吊运区域",
  136. ? ? ? ? ? "type": "2",
  137. ? ? ? ? ? "children": [
  138. ? ? ? ? ? ? {
  139. ? ? ? ? ? ? ? "id": "311",
  140. ? ? ? ? ? ? ? "type": "3",
  141. ? ? ? ? ? ? ? "label": "8号吊点鞍马座"
  142. ? ? ? ? ? ? },
  143. ? ? ? ? ? ? {
  144. ? ? ? ? ? ? ? "id": "312",
  145. ? ? ? ? ? ? ? "type": "3",
  146. ? ? ? ? ? ? ? "label": "8号起吊点右"
  147. ? ? ? ? ? ? }
  148. ? ? ? ? ? ]
  149. ? ? ? ? },
  150. ? ? ? ? {
  151. ? ? ? ? ? "id": "32",
  152. ? ? ? ? ? "label": "区域监控",
  153. ? ? ? ? ? "type": "2",
  154. ? ? ? ? ? "children": [
  155. ? ? ? ? ? ? {
  156. ? ? ? ? ? ? ? "id": "321",
  157. ? ? ? ? ? ? ? "type": "3",
  158. ? ? ? ? ? ? ? "label": "测试点33"
  159. ? ? ? ? ? ? },
  160. ? ? ? ? ? ? {
  161. ? ? ? ? ? ? ? "id": "322",
  162. ? ? ? ? ? ? ? "type": "3",
  163. ? ? ? ? ? ? ? "label": "原料跨1"
  164. ? ? ? ? ? ? },
  165. ? ? ? ? ? ? {
  166. ? ? ? ? ? ? ? "id": "323",
  167. ? ? ? ? ? ? ? "type": "3",
  168. ? ? ? ? ? ? ? "label": "板坯LH钒铁柜"
  169. ? ? ? ? ? ? }
  170. ? ? ? ? ? ]
  171. ? ? ? ? },
  172. ? ? ? ? {
  173. ? ? ? ? ? "id": "33",
  174. ? ? ? ? ? "label": "罐号识别",
  175. ? ? ? ? ? "type": "2",
  176. ? ? ? ? ? "children": [
  177. ? ? ? ? ? ? {
  178. ? ? ? ? ? ? ? "id": "331",
  179. ? ? ? ? ? ? ? "type": "3",
  180. ? ? ? ? ? ? ? "label": "修罐间东头"
  181. ? ? ? ? ? ? }
  182. ? ? ? ? ? ]
  183. ? ? ? ? }
  184. ? ? ? ]
  185. ? ? },
  186. ? ? {
  187. ? ? ? "id": "4",
  188. ? ? ? "label": "冷轧厂",
  189. ? ? ? "type": "1",
  190. ? ? ? "children": [
  191. ? ? ? ? {
  192. ? ? ? ? ? "id": "41",
  193. ? ? ? ? ? "label": "轧钢作业区",
  194. ? ? ? ? ? "type": "2",
  195. ? ? ? ? ? "children": [
  196. ? ? ? ? ? ? {
  197. ? ? ? ? ? ? ? "id": "411",
  198. ? ? ? ? ? ? ? "type": "3",
  199. ? ? ? ? ? ? ? "label": "轧机主控室"
  200. ? ? ? ? ? ? }
  201. ? ? ? ? ? ]
  202. ? ? ? ? },
  203. ? ? ? ? {
  204. ? ? ? ? ? "id": "42",
  205. ? ? ? ? ? "label": "普冷作业区",
  206. ? ? ? ? ? "type": "2",
  207. ? ? ? ? ? "children": [
  208. ? ? ? ? ? ? {
  209. ? ? ? ? ? ? ? "id": "421",
  210. ? ? ? ? ? ? ? "type": "3",
  211. ? ? ? ? ? ? ? "label": "原料库1"
  212. ? ? ? ? ? ? },
  213. ? ? ? ? ? ? {
  214. ? ? ? ? ? ? ? "id": "422",
  215. ? ? ? ? ? ? ? "type": "3",
  216. ? ? ? ? ? ? ? "label": "原料库2"
  217. ? ? ? ? ? ? }
  218. ? ? ? ? ? ]
  219. ? ? ? ? },
  220. ? ? ? ? {
  221. ? ? ? ? ? "id": "43",
  222. ? ? ? ? ? "label": "镀锌作业区",
  223. ? ? ? ? ? "type": "2",
  224. ? ? ? ? ? "children": [
  225. ? ? ? ? ? ? {
  226. ? ? ? ? ? ? ? "id": "431",
  227. ? ? ? ? ? ? ? "type": "3",
  228. ? ? ? ? ? ? ? "label": "生产运行检测"
  229. ? ? ? ? ? ? },
  230. ? ? ? ? ? ? {
  231. ? ? ? ? ? ? ? "id": "432",
  232. ? ? ? ? ? ? ? "type": "3",
  233. ? ? ? ? ? ? ? "label": "轧机高压室"
  234. ? ? ? ? ? ? }
  235. ? ? ? ? ? ]
  236. ? ? ? ? },
  237. ? ? ? ? {
  238. ? ? ? ? ? "id": "44",
  239. ? ? ? ? ? "label": "点检维护作业区",
  240. ? ? ? ? ? "type": "2",
  241. ? ? ? ? ? "children": [
  242. ? ? ? ? ? ? {
  243. ? ? ? ? ? ? ? "id": "441",
  244. ? ? ? ? ? ? ? "type": "3",
  245. ? ? ? ? ? ? ? "label": "退火炉4"
  246. ? ? ? ? ? ? },
  247. ? ? ? ? ? ? {
  248. ? ? ? ? ? ? ? "id": "442",
  249. ? ? ? ? ? ? ? "type": "3",
  250. ? ? ? ? ? ? ? "label": "退火炉1"
  251. ? ? ? ? ? ? }
  252. ? ? ? ? ? ]
  253. ? ? ? ? }
  254. ? ? ? ]
  255. ? ? }
  256. ? ]

vue遍历包含数组的对象

最近开发自己博客,在遍历对象类型数据时候,怎么也拿不到,尝试过两层遍历都不行,最终利用巧计解决了,记录下来:

请求来拿到后数据格式是下面这种

  1. data(){
  2. ? ? return{
  3. ? ? ? noticeList:{
  4. ? ? ? ? notice:["aaaaa","bbbb","cccc"],
  5. ? ? ? ? times:[1564707990252,1564708337658,1564707990252]
  6. ? ? ? },
  7. ? ? }
  8. ? },

最终在html中这样遍历

  1. <li v-for="(text,index) in noticeList.notice" :key="index">
  2. ? {{text}}<span>{{noticeList.times[index] | formatDate}}</span>
  3. </li>

最重要的一点是要对象中两个数组的index对应的值是相对应的值。遍历对象中其中一个数组,另外一个数组用遍历过程中的index来获取其中对应的值,非常巧妙的一个办法。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号