在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ 不定層級(jí)數(shù)據(jù)如何以樹(shù)形圖形式渲染？

不定層級(jí)數(shù)據(jù)如何以樹(shù)形圖形式渲染？

7月13日 更新
在antd TreeNode組件內(nèi)找到了一個(gè)簡(jiǎn)單方案，從數(shù)據(jù)直接生成一個(gè)樹(shù)形圖，需要考慮的就是數(shù)據(jù)結(jié)構(gòu)了，不需要考慮遞歸的問(wèn)題。

需要根據(jù)一個(gè)不定層級(jí)的數(shù)據(jù)以樹(shù)形圖形式渲染一個(gè)菜單
數(shù)據(jù)結(jié)構(gòu)如下：

[{"checked":null,"id":1,"name":"超級(jí)管理員","pId":0},{"checked":null,"id":2,"name":"采購(gòu)區(qū)總","pId":3,},{"checked":null,"id":3,"name":"采購(gòu)專(zhuān)員","pId":4},{"checked":null,"id":4,"name":"采購(gòu)經(jīng)理","pId":5},{"checked":null,"id":5,"name":"財(cái)務(wù)出納","pId":6}]

組件為Antd TreeMenu，使用方式：

<TreeNode title={} key={}>
   <TreeNode title={} key={}>
   </TreeNode
</TreeNode>

嘗試通過(guò)遞歸方式解決，雖然理解概念，但就是沒(méi)有思路，希望得到解答！

回答
編輯回答
解夏

Tree也支持treeData這個(gè)屬性，好像文檔中沒(méi)有列出。不過(guò)數(shù)據(jù)的轉(zhuǎn)成這樣的：

[
    key: 'key',
    title: 'your title',
    children: []
]
2017年1月15日 01:32
編輯回答
毀了心

先把數(shù)組轉(zhuǎn)成轉(zhuǎn)成樹(shù)形結(jié)構(gòu)，推薦https://www.npmjs.com/package...

const treeNode = (props) =>
<div className="tree-node">
<div className="tree-node-name">{props.data.name}</div>
{props.data.children ?
<treeNode data={props.data.children}/>
: ''}
</div>
2017年11月1日 19:14