react antd treeselect 选择显示父节点

您可以通过在 `TreeSelect` 组件中设置 `treeCheckStrictly` 属性为 true，并在 `onChange` 事件中对选中的节点进行处理，以实现选择显示父节点的功能。具体实现方式如下：

import { TreeSelect } from 'antd';

const treeData = [
  {
    title: 'Node1',
    value: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
      },
      {
        title: 'Child Node2',
        value: '0-0-1',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-0',
      },
      {
        title: 'Child Node4',
        value: '0-1-1',
      },
    ],
  },
];

function TreeSelectWithParent(props) {
  const { onChange, ...restProps } = props;

  const handleTreeSelectChange = (value, label, extra) => {
    // 如果选中的节点是父节点，则将其子节点也一并选中
    if (extra.checkedNodes.some(node => node.isLeaf === false)) {
      const checkedValues = extra.checkedNodes
        .filter(node => node.isLeaf)
        .map(node => node.value);
      onChange(checkedValues, label, extra);
    } else {
      onChange(value, label, extra);
    }
  };

  return (
    <TreeSelect
      treeData={treeData}
      treeCheckable={true}
      treeCheckStrictly={true}
      onChange={handleTreeSelectChange}
      {...restProps}
    />
  );
}

在上述代码中，我们定义了一个名为 `TreeSelectWithParent` 的组件，该组件通过设置 `treeCheckStrictly` 属性为 true，实现了只能勾选叶子节点的功能。同时，在 `onChange` 事件中，我们对选中的节点进行了处理，如果选中的节点是父节点，则将其子节点也一并选中。最后，我们将处理后的值传递给原本的 `onChange` 事件处理函数。