---
title: 数据下拉组件用法
order: 2
---


包含通用下拉、异步下拉、字典数据下拉、远程搜索
通用级联组件、组织架构选择器、人员选择器等
```jsx
import React, { Component,useEffect } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const items = [
  {
    title: '普通下拉框',
    name: 'select1',
    component: 'Select',
    required:true,
    defaultValue:1,
    enum: [ // 不推荐使用
      { label: "AAA", value: 1 },
      { label: "BBB", value: 2 },
    ],
  },
  {
    title: '自定义数据节点',
    name: 'select2',
    component: 'Select',
    componentProps: {
      dataSource: [
        { name: 'AAA', code: 1 },
        { name: 'BBB', code: 2 },
      ],
      fieldNames: {label: 'name', value: 'code'}, // 默认 {label: 'label', value: 'value'}
    },
  },
  {
    title: '字典数据',
    name: 'select3',
    component: 'Select',
    componentProps: {
        dict:[
            {dictName:'待审核',dictValue:1},
            {dictName:'已审核',dictValue:2}
        ]
    },
  },
  {
      title: "省市区",
      name: "area",
      component: "AreaSelector",
      componentProps: {
        // multiple: true,
      },
  },
  {
    title: '级联数据',
    name: 'cascader',
    component: 'CascaderSelect',
    required:true,
    defaultValue:'2973',
    componentProps: {
        multiple:true,
        fieldNames: {label: 'name', value: 'code',children: 'child'},
        listStyle:{width:'180px'},
        // loadData: true,
        // onChange:(field, value, data, extra)=>{
        //   console.log(field, value, data, extra);
        //   field.setValue(data);
        //   // field.setState({dataSource:[{value:1,label:'2'}]})
        // },
        getDataSource: async (field, data) => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(
              [
                {
                  code: "2973",
                  name: "陕西",
                  child: [
                    {
                      code: "2974",
                      name: "西安",
                      child: [
                        {
                          code: "2975",
                          name: "西安市",
                          isLeaf: true,
                          checkboxDisabled: true
                        },
                        { code: "2976", name: "高陵县", isLeaf: true }
                      ]
                    },
                    {
                      code: "2980",
                      name: "铜川",
                      disabled: true,
                      child: [
                        { code: "2981", name: "铜川市", isLeaf: true },
                        { code: "2982", name: "宜君县", isLeaf: true }
                      ]
                    }
                  ]
                }      
              ]
              )
            }, 1500);
          });
        },
    },
  },
  {
    title: '异步数据',
    name: 'select4',
    component: 'Select',
     defaultValue: 'aaa',
    componentProps:{
      placeholder:'请输入',
      fieldNames: {label: 'name', value: 'code'},
      getDataSource: async (field) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([
              {
                name: 'AAA',
                code: 'aaa',
              },
              {
                name: 'BBB',
                code: 'ccc',
              },
            ]);
            // field.setValue('aaa')
          }, 1500);
        });
      },
    },
  },
  {
    title: '远程搜索',
    name: 'asnySearchSelect',
    component: 'SearchSelect',
    required:true,
    defaultValue:[{value:'aaa',label:'AAA'}],
    componentProps:{
      placeholder:'请输入',
      mode:'multiple',
      labelInValue:true,
      searchOnFocus:true,
      fieldNames: {label: 'name', value: 'code'},
      getDataSource: async (keyword) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve([
              {
                name: 'AAA',
                code: 'aaa',
              },
              {
                name: 'BBB',
                code: 'ccc',
              },
            ]);
          }, 1500);
        });
      },
    }
  },
  {
    title:'人员选择器',
    name:'user',
    component:'EmpSelector',
    defaultValue:[{userId:'U0163E11C76664755963690140871031',userName:'依然'}],
    componentProps:{
      maxItems: 3, // 最大选择数量
      fieldNames:{label:'userName',value:'userId'},
      getUserListForOrg: async (data) =>{ // 人员搜索接口
          return new Promise((resolve) => {
          setTimeout(() => {
            resolve([{"headIconUrl":"https://wework.qpic.cn/wwpic/351104_aQomsUssQTugGDJ_1661360131/0","orgPathDesc":"后台-产研中心-产品部","position":"产品专家","realName":"杨扬","userId":"YWUS48737350231200163E11C7664816","userName":"卓万里","userPhone":"15158133652"},{"headIconUrl":"https://wework.qpic.cn/wwpic/351104_aQomsUssQTugGDJ_1661360131/0","orgPathDesc":"研发部-平台基础组-公共服务组","position":"资深JAVA开发工程师","realName":"张华峰","userId":"U0163E11C76664755963690140871031","userName":"依然","userPhone":"15757161434"}]);
          }, 1500);
        });
      },
      getDataSource: async (data) =>{ // 人员搜索接口
          return new Promise((resolve) => {
          setTimeout(() => {
            resolve([{"headIconUrl":"https://wework.qpic.cn/wwpic/351104_aQomsUssQTugGDJ_1661360131/0","orgPathDesc":"后台-产研中心-产品部","position":"产品专家","realName":"杨扬","userId":"YWUS48737350231200163E11C7664816","userName":"卓万里","userPhone":"15158133652"},{"headIconUrl":"https://wework.qpic.cn/wwpic/351104_aQomsUssQTugGDJ_1661360131/0","orgPathDesc":"研发部-平台基础组-公共服务组","position":"资深JAVA开发工程师","realName":"张华峰","userId":"U0163E11C76664755963690140871031","userName":"依然","userPhone":"15757161434"}]);
          }, 1500);
        });
      },
      getOrgList: async ()=>{ // 组织架构接口
        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);
        });
      }
    },
  },
  {
    title:'组织架构选择器',
    name:'org',
    component:'OrgSelector',
    defaultValue:[{orgId: '5', orgName: '法务部'}],
    componentProps:{
      maxItems: 3, // 最大选择数量
      fieldNames:{label:'orgName',value:'orgId'},
      getOrgList: async ()=>{ // 组织架构接口
        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 =() => {
    return (
      <div>
        <YwJsonForm items={items} onCreate={(_form)=>{
          _form.setValues({org:[{orgId: '2', orgName: '前台'}]})
        }} />
      </div>
    );
}

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