TreeSelect懒加载数据，使用搜索问题

qq_37953527

已于 2022-08-12 15:31:46 修改

阅读量2.6k

点赞数

分类专栏： antDesign 文章标签： html 前端 javascript react

于 2022-08-12 15:21:37 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37953527/article/details/126304805

版权

本文探讨了在React中使用TreeSelect组件实现懒加载数据时遇到的搜索问题。当接口返回name和id，通过fieldNames改变label和value后，搜索功能默认搜索label无效。解决方案是利用treeNodeFilterProp指定搜索字段为'name'。然而，结合懒加载，搜索后选中的节点在再次展开时失去展开按钮。解决这个问题的方法包括：1) 使用唯一key（如UUID）迫使每次打开TreeSelect时组件刷新；2) 设置默认展开的树节点以刷新组件。这些技巧确保搜索后仍能继续选择下级节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TreeSelect组件添加showSearch可以进行搜索。
我的接口返回的是name和id，我使用fieldNames对label和value进行了更改，但搜索默认搜索的是label（这样是搜索不到内容的）。

如果使用了fieldNames需要使用treeNodeFilterProp来对应搜索时对那个字段进行搜索（treeNodeFilterProp=“name”，name页面展示的内容）。

<TreeSelect
  showSearch
  treeNodeFilterProp="name"
  allowClear={true}
  style={
  {
    width: '100%',
  }}
  value={value}
  dropdownStyle={
  {
  maxHeight: 400,
    overflow: 'auto',
  }}
  treeData={treeData1}
  placeholder="请选择"
  onChange={onChange1}
  loadData={onLoadData1}
  fieldNames={
  { label: 'name', value: 'id' }} // 改名默认字段是label和value
/>

因为我使用了懒加载功能，这导致在搜索的时候，搜索到指定内容点击确认，但是再次打开时选中的那个左侧的展开按钮消失，导致后续无法在选择下一级的节点。