把后端傳過(guò)來(lái)的平鋪數(shù)組數(shù)據(jù)處理為tree組件需要的樹形數(shù)據(jù)
首先要補(bǔ)充工具函數(shù)乏冀,在**`src/utils/index.js`**文件中,補(bǔ)充一個(gè)函數(shù)tranListToTreeData棍鳖,如下:
①因?yàn)樽罱K要產(chǎn)出樹狀數(shù)據(jù)的數(shù)組? 所以首先要?jiǎng)?chuàng)建一個(gè)空數(shù)組撒璧,而數(shù)組中又要包含若干個(gè)對(duì)象,所以也要?jiǎng)?chuàng)建一個(gè)空對(duì)象
②建立一個(gè)映射關(guān)系续镇,使得可以通過(guò)id快速找到對(duì)應(yīng)的元素,這時(shí)就要對(duì)原數(shù)組進(jìn)行遍歷? 這次遍歷只是為了將新對(duì)象調(diào)整成自己想要的格式(數(shù)組中套對(duì)象)
首先要給每一項(xiàng)添加一個(gè)children屬性
然后給空對(duì)象賦值销部,key值是每一項(xiàng)的id,value值是遍歷的每一項(xiàng)
③這時(shí)的空對(duì)象中數(shù)據(jù)的格式就是以每一項(xiàng)的id為key 值摸航,以每一項(xiàng)結(jié)果為value值,然后對(duì)數(shù)組再遍歷一次? 這次遍歷是為了給新數(shù)組賦值
如果pid的值為空舅桩,說(shuō)明這一項(xiàng)就是父級(jí)酱虎,也代表在它的children屬性中將會(huì)有其他項(xiàng)的pid與這一項(xiàng)id值相對(duì)應(yīng)的子節(jié)點(diǎn)會(huì)被添加進(jìn)來(lái),而此時(shí)如果遍歷到了這一項(xiàng)擂涛,需要做的就是將它直接push到新的空數(shù)組里讓它作為父級(jí)準(zhǔn)備使用
如果pid不為空就是子節(jié)點(diǎn)读串,那么就將這一項(xiàng)push到id值與之相同的父級(jí)children屬性中
最后將新數(shù)組返回
④將這個(gè)工具函數(shù)導(dǎo)出,并導(dǎo)入到需要的組件中使用即可