---
title: 自定义树形选择 业务组件
sidemenu: true
---

## 自定义树形选择 业务组件


```tsx
/**
 * background: '#f0f2f5'
 */
import React, { useState } from 'react';
import { Space, Button, Form } from 'antd';
import {CustomTreeSelect} from '@/components';


export default () => {
    const [value, setValue] = useState<string[]>([]);

  const onChange = (newValue: string[]) => {
    setValue(newValue);
  };

const treeData = [
  {
    value: 'parent 1',
    title: 'parent 1',
    children: [
      {
        value: 'parent 1-0',
        title: 'parent 1-0',
        children: [
          {
            value: 'leaf1',
            title: 'leaf1',
          },
          {
            value: 'leaf2',
            title: 'leaf2',
          },
        ],
      },
      {
        value: 'parent 1-1',
        title: 'parent 1-1',
        children: [
          {
            value: 'leaf3',
            title: 'leaf3',
          },
        ],
      },
    ],
  },
];
  return ( 
    <Space>
      <Form>
        <Form.Item name="test">
          <CustomTreeSelect 
            placeholder="请选择" 
            width="500px" 
            treeData={treeData} 
            labelInValue={true}
            showSearch={true}
            filterTreeNode={(node, treeNode) => {
              return treeNode?.title?.indexOf?.(node) > -1;
            }}
          /> 
      </Form.Item>
      </Form>
      <Button onClick={()=> setValue(['leaf1', 'leaf2'])}> 外部更改值 </Button>
    </Space> 
  )};
```

<API src="./index.tsx"></API>