ant design Tree树形组件叶子节点横向排列

您好！要使Ant Design Tree树形组件的叶子节点横向排列，您可以使用Tree组件的treeNode属性来自定义节点的渲染方式。以下是一种实现方式：

首先，您需要引入Tree组件和Icon组件：

import { Tree, Icon } from 'antd';

然后，您可以通过自定义渲染函数来调整叶子节点的布局。在渲染函数中，您可以根据节点的isLeaf属性来判断是否为叶子节点，如果是叶子节点，则将其横向排列。以下是一个示例：

const renderTreeNodes = (data) => {
  return data.map((item) => {
    if (item.children) {
      return (
        <Tree.TreeNode title={item.title} key={item.key}>
          {renderTreeNodes(item.children)}
        </Tree.TreeNode>
      );
    }
    return (
      <Tree.TreeNode title={item.title} key={item.key} isLeaf>
        {item.title}
      </Tree.TreeNode>
    );
  });
};

在上面的示例中，我们通过设置isLeaf属性为true来标识叶子节点，并在叶子节点的title属性中添加了一个自定义的布局。

最后，您可以将渲染函数应用到Tree组件中，并将数据传递给Tree组件的treeData属性：

const treeData = [
  {
    title: 'Node 1',
    key: '0-0',
    children: [
      {
        title: 'Leaf 1',
        key: '0-0-0',
      },
      {
        title: 'Leaf 2',
        key: '0-0-1',
      },
    ],
  },
  {
    title: 'Node 2',
    key: '0-1',
    children: [
      {
        title: 'Leaf 3',
        key: '0-1-0',
      },
      {
        title: 'Leaf 4',
        key: '0-1-1',
      },
    ],
  },
];

const MyTree = () => {
  return (
    <Tree showLine>
      {renderTreeNodes(treeData)}
    </Tree>
  );
};

在上面的示例中，我们使用了一个简单的树形数据结构，并将其传递给了Tree组件的treeData属性。通过调用renderTreeNodes函数，我们实现了叶子节点横向排列的效果。

希望这可以帮助到您！如果您还有其他问题，请随时提问。