antd tree 子菜单横向排布
时间: 2023-08-07 15:00:25 浏览: 49
要在 Ant Design 中实现 Antd Tree 子菜单横向排布,你可以使用 `a-tree` 组件的 `treeNodeFilterProp` 属性和自定义样式来实现。以下是一个示例代码:
```jsx
import { Tree } from 'antd';
const { TreeNode } = Tree;
const treeData = [
{
title: 'Node 1',
key: '0-0',
children: [
{
title: 'Child Node 1',
key: '0-0-0',
children: [
{
title: 'Grandchild Node 1',
key: '0-0-0-0',
},
{
title: 'Grandchild Node 2',
key: '0-0-0-1',
},
],
},
{
title: 'Child Node 2',
key: '0-0-1',
},
],
},
{
title: 'Node 2',
key: '0-1',
children: [
{
title: 'Child Node 3',
key: '0-1-0',
},
{
title: 'Child Node 4',
key: '0-1-1',
},
],
},
];
const TreeComponent = () => {
return (
<Tree
treeData={treeData}
treeNodeFilterProp="title"
defaultExpandAll
style={{ width: '100%' }}
switcherIcon={<></>}
showLine={{ showLeafIcon: false }}
className="horizontal-tree"
>
{renderTreeNodes(treeData)}
</Tree>
);
};
const renderTreeNodes = (data) => {
return data.map((item) => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key}>
{renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode {...item} />;
});
};
export default TreeComponent;
```
然后,你可以在 CSS 文件中添加以下样式:
```css
.horizontal-tree .ant-tree-node-content-wrapper {
display: inline-block;
}
```
这样,子菜单就会横向排布了。你可以根据需要进行样式调整和修改。