vue深度優先遍歷多層數組對象方式(相當於多棵樹、三級樹)
深度優先遍歷多層數組對象
這個方法如果是對於下面的三級樹的話可以拿到爺爺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來獲取其中對應的值,非常巧妙的一個辦法。
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 基於ElementUI中Table嵌套實現多選的示例代碼
- Vue Element-ui實現樹形控件節點添加圖標詳解
- vue遞歸組件實現elementUI多級菜單
- vue中的el-tree @node-click傳自定義參數
- Vue使用el-tree 懶加載進行增刪改查功能的實現