• antd TreeSelect 无限级选择


    实现无限级多选功能

    一、请求接口处理成以下数据(第二部)
    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; }
  • 相关阅读:
    eclipse与myeclipse恢复已删除的文件和代码
    DAO层使用泛型的两种方式
    tomcat域名配置
    java 自动装箱与拆箱
    从不同的配置文件中读取配置信息
    java中 == 与 equal 的区别
    myeclipse 启动无故报错
    js验证身份证号,超准确
    myeclipse中使用tomcat修改类不再需要重启了
    myeclipse 的优化与改善
  • 原文地址:https://www.cnblogs.com/na-w/p/11813394.html
Copyright © 2020-2023  润新知