1

7月13日 更新
在antd TreeNode组件内找到了一个简单方案,从数据直接生成一个树形图,需要考虑的就是数据结构了,不需要考虑递归的问题。

需要根据一个不定层级的数据以树形图形式渲染一个菜单
数据结构如下:

[{"checked":null,"id":1,"name":"超级管理员","pId":0},{"checked":null,"id":2,"name":"采购区总","pId":3,},{"checked":null,"id":3,"name":"采购专员","pId":4},{"checked":null,"id":4,"name":"采购经理","pId":5},{"checked":null,"id":5,"name":"财务出纳","pId":6}]

组件为Antd TreeMenu,使用方式:

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

尝试通过递归方式解决,虽然理解概念,但就是没有思路,希望得到解答!

2018-07-11 提问
2 个回答
0

先把数组转成转成树形结构,推荐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>
0

Tree也支持treeData这个属性,好像文档中没有列出。不过数据的转成这样的:

[
    key: 'key',
    title: 'your title',
    children: []
]

撰写答案

你可能感兴趣的

推广链接