---
title: 部门选择器
order: 1
docGenIncludes:
  - src/components/YwOrgSelector/index.tsx
---



```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { YwOrgSelector,YwButton } from '@ywfe/yw-design';

const getDataSource = async (field) => {
        return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(
            {
              "orgName": "杭州遥望网络科技有限公司",
              "orgId": "1",
              "subOrgList": [
                { orgId: '2', orgName: '前台', subOrgList: null },
              {
                orgId: '3',
                orgName: '后台',
                subOrgList: [
                  {
                    orgId: '4',
                    orgName: '产研中心',
                    subOrgList: [{ orgId: '6', orgName: '前端', subOrgList: null }],
                  },
                  { orgId: '5', orgName: '法务部', subOrgList: null },
                ],
              },
              ]
    }
);
          }, 1500);
        });
      };
const App = () => {
  const [visible,setVisible] = useState(false)
    return (
      <div>
      <YwButton btnText='选择部门' type='link' onClick = {()=>{setVisible(true)}}/>
        <YwOrgSelector 
          visible={visible} 
          maxItems = {3}
          onCancel={()=>{setVisible(false)}}
          // defaultValue={[{orgName:'产研中心',orgId:'3'}]}
          getDataSource={getDataSource} 
          onOk={ (data)=>{
            console.log(data)
            setVisible(false)
          }}
        />
      </div>
    );
}

ReactDOM.render(<App />, mountNode);
```