Ant Design TreeSelect 多选和父节点选择解决方案

是的，Ant Design 的 TreeSelect 组件默认是单选的，并且不允许选择父节点。如果你想要实现多选功能，可以使用 Ant Design 提供的 Tree 组件，并结合 Checkbox 来实现多选功能。

以下是一个示例代码：

import { Tree, Checkbox } from 'antd';
import { useState } from 'react';

const { TreeNode } = Tree;

const data = [
  {
    title: 'Parent 1',
    key: 'parent1',
    children: [
      {
        title: 'Child 1',
        key: 'child1',
      },
      {
        title: 'Child 2',
        key: 'child2',
      },
    ],
  },
  {
    title: 'Parent 2',
    key: 'parent2',
    children: [
      {
        title: 'Child 3',
        key: 'child3',
      },
      {
        title: 'Child 4',
        key: 'child4',
      },
    ],
  },
];

const TreeComponent = () => {
  const [checkedKeys, setCheckedKeys] = useState([]);

  const onCheck = (checkedKeysValue) => {
    setCheckedKeys(checkedKeysValue);
  };

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

  return (
    <Tree checkable onCheck={onCheck} checkedKeys={checkedKeys}>
      {renderTreeNodes(data)}
    </Tree>
  );
};

export default TreeComponent;

在上面的示例中，我们使用了 Tree 组件，并添加了 Checkbox 来实现多选功能。通过使用onCheck回调函数来更新选中的节点列表。