TreeSelect组件如何搜索到多级节点 - antd3

459 阅读1分钟

场景:因为只需要二级节点的值作为传给后端的参数,前端拿到的数据一级节点并没有key或者value的值,所以一级节点的value值跟title值是一样的,以至于在使用搜索功能时,只能搜索到一级节点的数据

举个例子:

我的treeData是这样的:

image.png

本来的TreeSelect组件实现出来是这样的

image.png

搜索 【小学】:

image.png

搜索 【语文】:

image.png

搜索不到二级节点,只能搜到一级节点,这是因为TreeSelect组件有一个属性treeNodeFilterProp,它的默认值是value,我们只能用value搜索到对应的选项

image.png

比如说想搜索化学,使用化学的value值204就能搜出来

image.png

但是我们看到的选项显示出来的却是title

能搜索到一级节点,是由于我们的一级节点title和value的值是一样,所以,如果我们想要搜索到多级节点,只需要把上边这个属性treeNodeFilterProp改为title,这样搜索是就是根据title的值,也就是我们能看到的选项进行搜索的了

image.png

核心代码如下:

<TreeSelect
  treeData={treeData}
  placeholder="请选择"
  style={{width:'100%'}}
  treeCheckable
  showSearch
  treeNodeFilterProp="title"
  />