antd 树结构搜索功能如何实现
时间: 2024-01-13 19:04:43 浏览: 21
在 antd 的 Tree 组件中,可以使用 onSearch 属性来实现搜索功能。
具体步骤如下:
1. 在 Tree 组件中添加 onSearch 属性,并传入一个回调函数。
```
<Tree
onSearch={onSearch}
...
/>
```
2. 在回调函数中,获取搜索关键词和 Tree 数据源,根据关键词过滤出符合条件的节点,并更新 Tree 数据源。
```
const onSearch = (value) => {
const newData = data.filter((item) => {
return item.title.indexOf(value) > -1;
});
setData(newData);
};
```
3. 在 Tree 的节点渲染函数中,根据数据源渲染节点。注意,这里需要根据搜索结果来渲染节点,而不是直接渲染原始数据。
```
const renderTreeNodes = (data) => {
return data.map((item) => {
const title = item.title;
if (item.children) {
return (
<TreeNode title={title} key={item.key}>
{renderTreeNodes(item.children)}
</TreeNode>
);
} else {
return <TreeNode title={title} key={item.key} />;
}
});
};
...
<Tree>
{renderTreeNodes(data)}
</Tree>
```
完整代码示例:
```
import React, { useState } from "react";
import { Tree } from "antd";
const { TreeNode } = Tree;
const treeData = [
{
title: "Node1",
key: "1",
children: [
{
title: "Child Node1",
key: "1-1",
},
{
title: "Child Node2",
key: "1-2",
},
],
},
{
title: "Node2",
key: "2",
children: [
{
title: "Child Node3",
key: "2-1",
},
{
title: "Child Node4",
key: "2-2",
},
],
},
];
const SearchableTree = () => {
const [data, setData] = useState(treeData);
const onSearch = (value) => {
const newData = data.filter((item) => {
return item.title.indexOf(value) > -1;
});
setData(newData);
};
const renderTreeNodes = (data) => {
return data.map((item) => {
const title = item.title;
if (item.children) {
return (
<TreeNode title={title} key={item.key}>
{renderTreeNodes(item.children)}
</TreeNode>
);
} else {
return <TreeNode title={title} key={item.key} />;
}
});
};
return (
<Tree onSearch={onSearch}>
{renderTreeNodes(data)}
</Tree>
);
};
export default SearchableTree;
```