AntD的Tree组件提供了一些默认的展开和收起图标。但是,我们可以通过自定义Tree的Icon组件来使用自己的图标。以下是实现自定义图标的示例代码:
import { Tree } from 'antd';
import { FolderOutlined, FileOutlined, PlusSquareOutlined, MinusSquareOutlined } from '@ant-design/icons';
const { TreeNode } = Tree;
const treeData = [
{
title: 'parent 1',
key: '0-0',
children: [
{
title: 'parent 1-0',
key: '0-0-0',
children: [
{
title: 'leaf',
key: '0-0-0-0',
isLeaf: true,
},
{
title: 'leaf',
key: '0-0-0-1',
isLeaf: true,
},
],
},
{
title: 'parent 1-1',
key: '0-0-1',
children: [
{
title: 'leaf',
key: '0-0-1-0',
isLeaf: true,
},
],
},
],
},
];
// 自定义展开和收起图标的组件
const CustomIcon = ({ expanded, ...rest }) => {
if (rest.isLeaf) {
return ;
}
return expanded ? : ;
};
const CustomTree = () => {
return (
}
>
{treeData.map((item) => (
}
>
{item.children && item.children.map((child) => (
}
/>
))}
))}