【React】- Antd tree树形组件前、后缀图标

---

一、antd官网

antd官网树形控件API

二、代码

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中使用，而不能在请求数据的同时进行，否则会报错。