使用 React antd 的ProFormSelect组件 搜索查询 多选的写法
需求：需要一个搜索框，可以选择员工，（员工人数多无法一次性获取，全部放入options中），所以需要使用搜索功能，而且是可以多选员工。
确定组件：因为上面的组件使用ProForm…，为页面好对齐设置，选择ProFormSelect（其实select 比较好实现些）
实现效果
<ProFormSelectplaceholder={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 才可以键入数据进行搜索allowCleardebounceTime={500} //防止抖动fieldProps={{mode: 'multiple', //多选autoClearSearchValue:true, //选中后清空搜索框//使用onChangeonChange:(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组件的使用说明
