实现无限级多选功能
一、请求接口处理成以下数据（第二部）
let list = []; for (let i = 0; i < data.retdata.length; i++) { const item = data.retdata[i]; list.push({...item,parentcode:code}) } yield put({type: 'getUserListData', getUserList: list, cod, id}); return;
二、数据
let aa = [ { "code": "D1552729262LUO", "name": "华北", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1553484921BYD", "name": "华东", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D15578187295J3", "name": "营销中心", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D15583207542JI", "name": "福建区", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1568710637F3A", "name": "杭州区", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D15693912258V6", "name": "华南", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1570687649YJW", "name": "广东区", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1532955512C_R", "name": "武汉", "type": "organization", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1553485190IDX", "name": "开发部", "type": "depar", "parentcode": "D1552729262LUO", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1553485199RP8", "name": "市场部", "parentcode": "D1552729262LUO", "type": "depar", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1553485208PQN", "name": "技术部", "parentcode": "D1552729262LUO", "type": "depar", "clientcode": "Y0070", "imgurl": "" }, { "code": "P1529575663PES", "name": "陶丽丽", "parentcode": "D1552729262LUO", "type": "oper", "clientcode": "Y0070", "imgurl": "http://clientimginfo.csjsoft.cn/Y0070/prtsysimg/eshoppic/df017b35-54b9-4a66-ab9d-0b73242f2729.jpeg" }, { "code": "D1553485113GJU", "name": "武汉销售一部", "type": "depar", "parentcode": "D1532955512C_R", "clientcode": "Y0070", "imgurl": "" }, { "code": "D1553485131LJW", "name": "武汉销售二部", "type": "depar", "parentcode": "D1532955512C_R", "clientcode": "Y0070", "imgurl": "" } ]
二、渲染
1 <TreeSelect 2 onChange={treeChange} 3 value={pagedata.addNewData.userList} 4 treeCheckable={true} 5 showCheckedStrategy={SHOW_PARENT} 6 searchPlaceholder= '请选择可参投用户' 7 style={{ 8 '24.7rem', 9 }} 10 > 11 {pagedata.getUserList != [] && pagedata.getUserList != undefined ? aaa('') : []} 12 13 </TreeSelect>
三、处理数据
function aaa(id){ if(!breakAction(id)){ return; } let list = []; for (let i = 0; i < pagedata.getUserList.length; i++) { const item = pagedata.getUserList[i]; if(item.parentcode == id){ list.push(<TreeNode key={item.code} value={item.code} title={<div>{item.name}{item.type == 'oper' ? null : <Icon type="caret-down" style={{float: 'right'}} onClick={treeIconClick.bind(this, item.code, item.id)}/>}</div>}> {aaa(item.code)} </TreeNode>) } } return list; } function breakAction(id){ let aaa = false; for (let i = 0; i < pagedata.getUserList.length; i++) { const item = pagedata.getUserList[i]; if(item.parentcode == id){ aaa = true; } } return aaa; }