selectTree 改造

需求

把select改為selectTree，后台給的數據也進行了改造，數據里面多了children字段，包裹子集

 

 

 

代碼

//import

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

　　

//render 定義 loop

//獲取樹狀結構數據
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改為selectTree——antd

   <TreeSelect
       style={{ width: 300 }}
       defaultValue={intl('route_Monitor_skillName',true)}
       dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
       placeholder="請選擇技能組"
       allowClear
       treeDefaultExpandAll
       onChange={this.skillGroupChange}
   >
     {treeNodeList}
</TreeSelect>