antd TreeSelect onSearch搜索功能使用

11,774 阅读1分钟

antd的TreeSelect没有提供一个完整正确的搜索demo 2x.ant.design/components/…

在实际使用中会发现无法准确搜索树节点,要使用antdesign TreeSelect的搜索功能,至少要知道四个属性:

  • showSearch:是否启用搜索
  • treeNodeFilterProp:启用搜索后,输入项过滤对应的 treeNode 属性(比如value、title、key)
  • filterTreeNode:是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值
  • onSearch: 搜索文本框变化的回调

搜索结果的两种呈现方式 codesandbox.io/s/tree-sele…

  • 只返回存在搜索关键字的树节点

  • 返回整个树,存在关键字的节点高亮显示