antd tree 组件 只能选最终节点

Ant Design的Tree组件是一个用于展示树形结构的组件，它允许用户通过点击节点来展开和折叠子节点。然而，Tree组件并不支持直接选择子节点。如果你需要实现选择子节点功能，可以考虑使用其他组件或方法来实现。

如果你希望用户只能选择最终节点（即叶子节点），可以通过一些方式来实现这个功能。以下是一种可能的方法：

1. 确保只有叶子节点才具有可点击的特性，并且在其上显示一个选中状态。这样用户就只能点击叶子节点来选择它们，而无法点击子节点。
2. 添加一个取消选择的按钮或菜单项，允许用户在需要的时候取消他们的选择。这可以是在树的下方显示一个小按钮，或者使用右键菜单。

以下是一个使用Ant Design的Tree组件实现上述功能的示例代码：

import { Tree } from 'antd';

// 假设你已经有一个树形数据结构
const treeData = [
  {
    title: '父节点1',
    key: '0-0',
    children: [
      { title: '子节点1', key: '0-0-0' },
      { title: '子节点2', key: '0-0-1' },
    ],
  },
  { title: '父节点2', key: '0-1' },
];

// 使用Tree组件渲染树形结构，并添加一个取消选择的按钮
function Demo() {
  return (
    <Tree treeData={treeData} checkable type="min" onCheck={(checkedNodes, checkedKeys) => {}}>
      <Tree.Node node={treeData[0]} onClick={() => {}}>
        <span style={{ cursor: 'pointer' }}>选择最终节点</span>
      </Tree.Node>
    </Tree>
  );
}

在这个示例中，我们使用了Tree组件的checkable属性来启用树节点的选中状态。我们还添加了一个名为"选择最终节点"的节点，并使用了onClick属性来绑定一个回调函数，该函数会在用户点击这个节点时被调用。在回调函数中，你可以检查是否有任何节点的选中状态被改变，如果有，就执行相应的操作（例如更新数据或显示确认对话框）。

请注意，这只是一个简单的示例代码，你可能需要根据你的具体需求进行适当的调整和扩展。