antd5 tree 只搜索到父节点 不包含隐藏其他节点
时间: 2024-03-20 10:43:18 浏览: 87
treeview中只能打开一个节点
antd5 tree 默认的搜索只会搜索到当前可见的节点,不会搜索隐藏的其他节点。如果你想搜索到隐藏的其他节点,可以通过自定义搜索函数来实现。
你可以通过 `filterTreeNode` 属性来自定义搜索函数。比如,你可以通过 `filterTreeNode` 将搜索关键字递归地匹配到每个节点的子节点,并将匹配到的子节点也展示出来,这样就可以搜索到所有的节点了。
以下是一个示例代码:
```jsx
import { Tree } from 'antd';
const { TreeNode } = Tree;
function renderTreeNodes(data) {
return data.map((item) => {
if (item.children) {
return (
<TreeNode title={item.title} key={item.key}>
{renderTreeNodes(item.children)}
</TreeNode>
);
}
return <TreeNode title={item.title} key={item.key} />;
});
}
function filterTreeNode(inputValue, treeNode) {
const title = treeNode.props.title.toLowerCase();
if (title.indexOf(inputValue.toLowerCase()) > -1) {
return true;
}
if (treeNode.props.children) {
return treeNode.props.children.some((child) => filterTreeNode(inputValue, child));
}
return false;
}
function TreeComponent({ data }) {
return (
<Tree filterTreeNode={filterTreeNode}>
{renderTreeNodes(data)}
</Tree>
);
}
```
在这个示例中,我们通过 `renderTreeNodes` 递归地渲染每个节点及其子节点。然后,我们将自定义的 `filterTreeNode` 函数传递给 `Tree` 组件的 `filterTreeNode` 属性,当搜索框中输入关键字时,antd5 tree 会自动调用这个函数,将搜索关键字递归地匹配到每个节点的子节点,并将匹配到的子节点也展示出来。这样,我们就可以搜索到所有的节点了。
阅读全文