antd filtertreenode 模糊搜索

antd FilterTreeNode组件提供了一个模糊搜索的功能。你可以通过设置`filterTreeNode`属性为`true`来开启该功能。当开启了模糊搜索后，FilterTreeNode组件会在树节点中搜索匹配的内容，并将匹配的节点展示出来，其他不匹配的节点将被隐藏。

下面是一个示例代码：

import { Tree } from 'antd';

const { TreeNode } = Tree;

function filterTreeNode(node, keyword) {
  const title = node.props.title.toLowerCase();
  return title.indexOf(keyword.toLowerCase()) > -1;
}

function generateTreeNodes(treeData, keyword) {
  return treeData.map((item) => {
    const { title, children, ...rest } = item;
    const isMatched = filterTreeNode({ props: { title } }, keyword);
    const treeNodeProps = isMatched ? rest : { style: { display: 'none' } };

    if (children) {
      return (
        <TreeNode {...treeNodeProps} title={title} key={title}>
          {generateTreeNodes(children, keyword)}
        </TreeNode>
      );
    }

    return <TreeNode {...treeNodeProps} title={title} key={title} />;
  });
}

function App() {
  const treeData = [
    { title: 'Node 1' },
    { title: 'Node 2', children: [{ title: 'Child Node 1' }, { title: 'Child Node 2' }] },
    { title: 'Node 3', children: [{ title: 'Child Node 3' }] },
  ];

  const keyword = 'Node';

  return (
    <Tree filterTreeNode={true}>
      {generateTreeNodes(treeData, keyword)}
    </Tree>
  );
}

在上面的示例代码中，我们定义了一个`filterTreeNode`函数来判断节点是否匹配搜索关键字。然后使用`generateTreeNodes`函数递归生成带有匹配样式的树节点。最后，在`Tree`组件中设置`filterTreeNode`属性为`true`来开启模糊搜索功能。

你可以根据自己的需求修改示例代码中的`treeData`和`keyword`来实现你想要的模糊搜索效果。