antd--tree树形控件前、后缀图标

系统管理员 2022-10-06 04:51 242阅读 0赞

### 文章目录 ###

*  一、antd官网
 *  二、代码
 *   *  1.实现效果
     *  2.读入数据

--------------------

# 一、antd官网 #

[antd官网树形控件API][antd_API]

# 二、代码 #

## 1.实现效果 ##

![!][20210624161051293.png]  
[在这里插入图片描述][Link 1]

## 2.读入数据 ##

代码如下（示例）：

import {  Tree, Switch } from 'antd';//引入
    
    //需要的图标
    const baseIcon = <SVGIcon iconClass={ 'baseIcon'} width={ 14} height={ 14}></SVGIcon>;
    const departIcon = <SVGIcon iconClass={ 'department'} width={ 14} height={ 14}></SVGIcon>;
    const [treeData, settreeData] = useState([])//树形数据
    const companyMenu = (
        <Menu onClick={ (key) => itemClick(key)}>
          <Menu.Item key={ 'addCompany'}>
            添加子公司
          </Menu.Item>
          <Menu.Item key={ 'addArea'}>
            添加基地
          </Menu.Item>
          <Menu.Item key={ 'addDep'}>
            添加部门
          </Menu.Item>
        </Menu>
      )//后缀图标菜单
    useEffect(() => { 
    	//请求树形数据并更换关键字
        wapper(props.organizationModel.getOrganizationData(userInfo.tenantId)).then((res) => { 
          console.log(res, treeData);
          if (!res.failed && res.length) { 
            let tempData = [...res]
            settreeData(JSON.parse(JSON.stringify(tempData).replace(/areaId/g, 'key').replace(/areaName/g, 'title')))
          }
        })
        return () => { 
          settreeData([])
        }
      }, [userInfo.tenantId])
     
    const reGroupData = (data: any, index: number) => { 
        if (data && data.length) { 
          for (let i = 0; i < data.length; i++) { 
          //后缀图标，根据不同类型显示相对于的菜单,如果已被添加后缀图标则使用原标题
            data[i].title = !data[i].title? (
              <div className={ styles.titleBox}>
                <div className={ styles.title}>
                  { 
                    data[i].areaName
                  }
                </div>
                <Dropdown
                  trigger={ ['click']}
                  overlay={ data[i]?.organizationType === 'company' ? companyMenu : data[i]?.organizationType === 'area' ? areaMenu : menu}
                >
                  <div onClick={ (e) => downMenu(e, data[i])} className={ styles.svg}>
                    <SVGIcon iconClass='downMenu' hoverClass='downMenu_sel' width={ 12} height={ 12}></SVGIcon>
                  </div>
                </Dropdown>
    
              </div>
            ) : (data[i].title)
            switch (data[i]?.organizationType) { 
              case 'company': { 
                data[i].icon = companyIcon
                break;
              }
              case 'area': { 
                data[i].icon = baseIcon
    
                break;
              }
              case 'department': { 
                data[i].icon = departIcon
                break;
              }
    
              default:
                break;
            }
            if (data[i]?.children) { 
              data[i].children = reGroupData(data[i].children, index + 1)
            }
          }
        }
        return data;
      }
    //render
    	<Tree
            showIcon
            treeData={ reGroupData(treeData)}
            blockNode
            height={ height}
            onRightClick={ (e) => { 
              rightClickHandle(e);
            }}
            onSelect={ (key, e) => { 
              onSelectHandle(key, e);
            }}
         />

注意：更换图标的方法只能在render中使用，而不能在请求数据的同时进行，否则会报错。

[antd_API]: https://www.antdv.com/components/tree-cn/
[20210624161051293.png]: /images/20221005/d26e214ce9d2437ca0efe6c38b165ca7.png
[Link 1]: https://img-blog.csdnimg.cn/20210611101749778.png