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

Ant Design 的 Tree 组件默认是纵向排列的，但是可以通过设置 blockNode 属性为 false 来使得叶子节点横向排列。

以下是一个简单的例子，展示了如何设置 blockNode 属性：

import React from 'react';
import ReactDOM from 'react-dom';
import { Tree } from 'antd';
 
const { TreeNode } = Tree;
 
class App extends React.Component {
  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
  };
 
  render() {
    return (
      <Tree
        showLine
        defaultExpandedKeys={['0-0-0']}
        blockNode
        onSelect={this.onSelect}
      >
        <TreeNode title="parent 1" key="0-0">
          <TreeNode title="leaf" key="0-0-0" />
          <TreeNode title="leaf" key="0-0-1" />
        </TreeNode>
        <TreeNode title="parent 2" key="0-1">
          <TreeNode title="leaf" key="0-1-0" />
        </TreeNode>
        <TreeNode title="parent 3" key="0-2">
          <TreeNode title="leaf" key="0-2-0" />
        </TreeNode>
      </Tree>
    );
  }
}
 
ReactDOM.render(<App />, document.getElementById('container'));

在这个例子中，blockNode 被设置为 true，这是默认值，导致树形结构是纵向的。如果你想要横向排列叶子节点，你需要将 blockNode 设置为 false：

<Tree
  showLine
  defaultExpandedKeys={['0-0-0']}
  blockNode={false} // 设置为 false 以使得叶子节点可以横向排列
  onSelect={this.onSelect}
>
  {/* 树节点 */}
</Tree>

当你将 blockNode 设置为 false 时，叶子节点将会以横向方式显示。如果你的 Tree 组件已经设置了 blockNode 为 false，则不需要再次设置，因为这是默认行为。