vue資料處理,父子相關資料處理
阿新 • • 發佈:2020-12-01
資料處理,父子相關資料處理
目的 實現完成Antd IView 等等 樹形控制元件的顯示
需要的資料格式就是
就是每個節點的資料都是放在children裡面的
處理方法:
首先判斷依據就是 我的父節點(parentId)別的indexId就證明是有關係的
所以我們首先要把所有的父節點都找出來,也就是我的parentId沒有和其餘indexid相同的,就證明我就是最外層的父節點。(這樣的情況會出現多個父節點就是有多棵樹了)
還有就是要是你的專案裡面 就只有一個父節點,那你就把資料寫死,要是沒有這個父節點,就全部沒有資料
注意: 裡面的parentIndexCode和indexCode,分別對於父子資料的對應關係,還有就是需要整理出來資料,自己往上寫,最後會整個return出來
// 處理相應的父子資料 toTreeData(data) { let resData = data; let tree = []; for (let i = 0; i < resData.length; i++) { if (resData.filter(item => resData[i].parentIndexCode == item.indexCode).length == 0) { let obj = { value: resData[i].indexCode, key: resData[i].indexCode.toString(), title: resData[i].name, indexCode: resData[i].indexCode, parentIndexCode: resData[i].parentIndexCode, slots: { icon: 'global', }, children: [] }; tree.push(obj); // resData.splice(i, 1); } } run(tree); function run(chiArr) { if (resData.length !== 0) { for (let i = 0; i < chiArr.length; i++) { for (let j = 0; j < resData.length; j++) { if (chiArr[i].indexCode == resData[j].parentIndexCode) { let obj = { value: resData[j].indexCode, key: resData[j].indexCode, title: resData[j].name, indexCode: resData[j].indexCode, slots: { icon: 'environment', }, parentIndexCode: resData[j].parentIndexCode, children: [] }; chiArr[i].children.push(obj); resData.splice(j, 1); j--; } } run(chiArr[i].children); } } } return tree; },