首页 > 其他 > 详细

selectTree 改造

时间:2019-10-28 14:37:17      阅读:104      评论:0      收藏:0      [点我收藏+]

需求

把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>

  

 

selectTree 改造

原文:https://www.cnblogs.com/rong88/p/11751756.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!