场景:因为只需要二级节点的值作为传给后端的参数,前端拿到的数据一级节点并没有key或者value的值,所以一级节点的value值跟title值是一样的,以至于在使用搜索功能时,只能搜索到一级节点的数据
举个例子:
我的treeData是这样的:
本来的TreeSelect组件实现出来是这样的
搜索 【小学】:
搜索 【语文】:
搜索不到二级节点,只能搜到一级节点,这是因为TreeSelect组件有一个属性treeNodeFilterProp,它的默认值是value,我们只能用value搜索到对应的选项
比如说想搜索化学,使用化学的value值204就能搜出来
但是我们看到的选项显示出来的却是title
能搜索到一级节点,是由于我们的一级节点title和value的值是一样,所以,如果我们想要搜索到多级节点,只需要把上边这个属性treeNodeFilterProp改为title,这样搜索是就是根据title的值,也就是我们能看到的选项进行搜索的了
核心代码如下:
<TreeSelect
treeData={treeData}
placeholder="请选择"
style={{width:'100%'}}
treeCheckable
showSearch
treeNodeFilterProp="title"
/>