【React】- Antd tree树形组件前、后缀图标
文章目录一、antd官网二、代码1.实现效果2.读入数据一、antd官网antd官网树形控件API二、代码1.实现效果2.读入数据代码如下(示例):import { Tree, Switch } from 'antd';//引入//需要的图标const baseIcon = <SVGIcon iconClass={'baseIcon'} width={14} height={14}>&
·
一、antd官网
二、代码
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中使用,而不能在请求数据的同时进行,否则会报错。
更多推荐
已为社区贡献1条内容
所有评论(0)