selectTree transformation

demand

To select instead selectTree, the background to the data have been upgraded, more children inside the data field, a subset of parcels

 

 

 

Code

//import

import { Row , Col , Select , Button , Card ,Tooltip , Icon , TreeSelect  } from 'antd'
const { TreeNode } = TreeSelect;

　　

// render the definition of loop

// Get the tree structure data
const loop = skillGroupList =>
    skillGroupList.map(item => {
      if (item.children && item.children.length) {
        return (
            <TreeNode key={item.id} title={item.name} value={item.skillGroupId}>
              {loop(item.children)}
            </TreeNode>
        );
      }
       return <TreeNode key={item.id} title={item.name} value={item.skillGroupId}/>;
    });
const treeNodeList = loop(skillGroupList);

　　

select instead selectTree - antd

   <TreeSelect
       style={{ width: 300 }}
       defaultValue={intl('route_Monitor_skillName',true)}
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
       placeholder = "Please select skill set."
       allowClear
       treeDefaultExpandAll
       onChange={this.skillGroupChange}
   >
     {treeNodeList}
</TreeSelect>