antd TreeSelect樹選擇 搜索框

樹型選擇控件支持搜索框

import { TreeSelect } from 'antd';

<TreeSelect
  showSearch//顯示搜索框
  treeNodeFilterProp='title'//輸入項過濾對應的 treeNode 屬性, value或者title
  style={{ width: '100%'}}
  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
  placeholder="機構名稱"
  allowClear
  treeDefaultExpandAll
  onChange={this.onTreeChange}
  onFocus={this.getTreeSelect}
>
  {this.treeNodeRender()}
</TreeSelect>,

//js

treeNodeRender = () => {

  const { treeNode } = this.state;

  if(!treeNode || !treeNode.length){
    return;
  }

  return treeNode.map((v, i) => {
    return (
      <TreeNode

        value={v.medicalInstitutionId}
        title={v.medicalInstitutionSimpleCode}
        key={i}
      >
        {v.children && this.treeNodeChildRender(v.children)}
      </TreeNode>
    );
  });
}