组件部分:
import { Select } from 'antd';
const { Option } = Select;
export interface SelectProps {
searchVal: string;
setSearchOpt: any[];
onChangeHandl: (value: any) => void;
onSearch: (value: any) => void;
}
export default function (props: SelectProps) {
return (
<Select
style={{ paddingRight: 1 }}
showSearch // 使用单选模式可搜索
value={props.searchVal} // 选中当前条目,多选返回数组
placeholder={'公司/组织名称'} // select默认展示的说明
defaultActiveFirstOption={false} // 是否默认高亮第一个选项
filterOption={false} // 是否根据输入项进行筛选
onSearch={props.onSearch} // “文本框值”变化时的回调
onChange={props.onChangeHandl} // 选中option,或input的value回调
notFoundContent={null} // 当下拉列表为空时,显示的内容
allowClear // 是否支持清除
showArrow={true} // 是否显示select的右侧小图标
>
{props.setSearchOpt.map((item: any) => {
return <Option value={item.value}>{item.name}</Option>;
})}
</Select>
);
}
使用:
// 检索企业
const checkOrg = (value: string, callback: Function) => {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
const fake = async () => {
const data = await setCheckOrg?.({ key: value });
callback(
data?.map((t: any) => ({
name: t?.F_NAME,
value: t?.F_ORG_ID,
})),
);
};
if (value) {
timeout = setTimeout(fake, 300);
} else {
callback([]);
}
};
<SelectSearch
searchVal={searchVal}
setSearchOpt={searchOpt}
onChangeHandl={(value: any) => {
setSearchVal(value);
console.log(value);
form.setFieldsValue({ F_ORG_ID: value, F_ORG_NAME: value });
}}
onSearch={(value: any) => {
if (!value) return;
setSearchVal(value);
form.setFieldsValue({ F_ORG_ID: null, F_ORG_NAME: value });
checkOrg(value, setSearchOpt); //远程请求企业
}}
/>