react18中的ant@5中的tree怎么让最后一列的数据横向显示

在 react18 中使用 Antd@5 的 Tree 组件，如果希望最后一列数据横向显示，可以通过设置 `treeNodeLabelProp` 属性来实现。

具体实现步骤如下：

1. 在 Tree 组件中设置 `treeNodeLabelProp` 属性为一个新的属性名，例如 `label`。

<Tree
  treeData={treeData}
  treeNodeLabelProp="label"
  // 其他属性省略
/>

2. 在 treeData 数据源中，为每个节点添加一个新的属性 `label`，并将最后一列数据以数组形式存储。例如：

const treeData = [
  {
    title: "Node 1",
    key: "1",
    label: "Label 1",
    children: [
      {
        title: "Node 1-1",
        key: "1-1",
        label: ["Label 1-1-1", "Label 1-1-2"],
      },
      {
        title: "Node 1-2",
        key: "1-2",
        label: ["Label 1-2-1", "Label 1-2-2"],
      },
    ],
  },
];

3. 在 Tree 组件中使用 `render` 属性自定义渲染节点的标签内容，将最后一列数据以横向形式展示。例如：

<Tree
  treeData={treeData}
  treeNodeLabelProp="label"
  render={(node) => {
    const label = node.label;
    const isLeaf = !node.children;
    return (
      <div>
        <span>{node.title}</span>
        {isLeaf && (
          <div style={{ display: "flex" }}>
            {label.map((item, index) => (
              <div key={index} style={{ marginRight: "10px" }}>
                {item}
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }}
/>

通过以上步骤，即可实现 Antd@5 中的 Tree 组件最后一列数据横向显示的效果。