使用 React antd 的ProFormSelect组件 搜索查询 多选的写法

使用 React antd 的ProFormSelect组件 搜索查询 多选的写法

需求：需要一个搜索框，可以选择员工，（员工人数多无法一次性获取，全部放入options中），所以需要使用搜索功能，而且是可以多选员工。

确定组件：因为上面的组件使用ProForm…，为页面好对齐设置，选择ProFormSelect（其实select 比较好实现些）

实现效果

 <ProFormSelect
   placeholder={intl.formatMessage({ id: 'kaizen.please_type_name_for_search' })}
     name="notification_personnel"
     label={intl.formatMessage({ id: 'kaizen.select_notification_personnel' })}
     key="notification_personnel"
     showSearch          //有showSearch 才可以键入数据进行搜索
     allowClear
     debounceTime={500}   //防止抖动
     fieldProps={{
       mode: 'multiple',          //多选
       autoClearSearchValue:true,  //选中后清空搜索框
       //使用onChange
       onChange:(value)=>{
          return value    //必须要return一个值出去 表单项才会展示值在输入框上
       },
      }}
     request={(e: any) => {
       // 初始化为空的Promise，稍后resolve填充的数据
       return  new Promise<RequestOptionsType[]>((resolve, reject) => {
         if (e.keyWords) {
           request(`/api/users/getInfoByUserName`, {
             method: 'get',
             params: { username: e.keyWords },
             headers: {
               Accept: 'application/json',
             },
           }).then((response: any) => {
             if (response.data && response.data.length > 0) {
               const no_options: RequestOptionsType[] = response.data.map((key: any) => ({
                 label: key.display_name + '-' + key.username,
                 value: key.email,
               }));
               resolve(no_options);
             } else {
               resolve([]);
             }
           }).catch(reject);
         } else {
           resolve([]);
         }
       });
     }}

数据类型设置

  interface RequestOptionsType {
    label: string;
    value: string;
    // 其他属性...
  }

若无法解决问题还可以参考
链接: ProFormSelect支持搜索查询的写法
链接: AntdPro中-ProFormSelect组件的使用说明