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

qq_37953527

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

阅读量2.3k

点赞数

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

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

本文链接：https://blog.csdn.net/qq_37953527/article/details/126304805

版权

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
/>

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