关闭ant的tree_Ant-Design的树形控件Tree的使用心得

树形控件在需要层级展示的时候有很大的用处，如组织架构、国家地区等。这里记录的使用是在关于角色权限的展示。

需求是这样的：不同的角色会有不同的权限，切换角色的时候需要准确的显示该角色拥有的权限，且有相关权限的用户可对角色权限进行修改，即增加或删除用户的某一权限。

一开始看到原型的时候，想到Ant Design有的树形控件，感觉上比较简单。直到真正开始写代码的时候，发现好像并没有想象中那么简单。下面开始摸索之路。

首先，角色所拥有的权限树是通过请求接口返回的对象数组的数据，每一个权限拥有label、key、value和children。label、key、children对应tree组件里面的title、key和children，value是一个布尔值，用来判断当前权限是否被勾选(true为被勾选)。大致数据结构如下：

const treeData = [

{

title: 'parent 1',

key: '0-0',

value: false,

children: [

{

title: 'parent 1-0',

key: '0-0-0',

value: true,

},

{

title: 'parent 1-1',

key: '0-0-1',

value: false,

}

]

}

]

在拿到数据之后，需要把数据转换成树形控件，因为存