Select选择器 模糊查询
<Select showSearch placeholder="请选择" filterOption={false} optionFilterProp={‘children‘} loading={selectLoading1} onBlur={() => { productGetParams.title = ‘‘; productGetParams.page = 1; setProductOptions([]); }} onFocus={() => { getAssociatedProductsSelect({ page: 1, title: productGetParams.title }); }} onSearch={(val: any) => onSearch(val, 1)} onPopupScroll={(e: any) => onScroll(e, 1)} onChange={(value: any) => { // props.getDetail({ id: value, type: 1 }); setShopId(value) }} > {productOptions.map((item: any, index: any) => ( <Select.Option key={index} value={item.id}> {item.title} </Select.Option> ))} </Select>
/* 是否关联商品下拉框 */
let timeout1: any = null;
let productGetParams = { page: 1, title: ‘‘ }; // 获取数据的分页参数和搜索的值
const [productOptions, setProductOptions] = useState<any>([]); // 下拉框的值
const [hasMore1, setHasMore1] = useState<any>(true); // 是否有更多数据
const [selectLoading1, setSelectLoading1] = useState<any>(false); // 加载状态
// 数组根据属性去重 const unique = (arr: any, u_key: any) => { let map = new Map(); arr.forEach((item: any, index: any) => { if (!map.has(item[u_key])) { map.set(item[u_key], item); } }); return [...map.values()]; }; //下拉框搜索 const onSearch = (val: any, type: any) => { if (type == 1) { productGetParams.page = 1; setProductOptions([]); getAssociatedProductsSelect({ page: 1, title: val }); } }; //下拉框滚动分页 const onScroll = (e: any, type: any) => { if (e.target.scrollTop + e.target.offsetHeight === e.target.scrollHeight) { if (hasMore1 && type == 1) { getAssociatedProductsSelect({...productGetParams,page:productGetParams.page+1}); } } }; // 获取 是否关联商品 的下拉数据 const getAssociatedProductsSelect = (params: any) => { if (timeout1) { clearTimeout(timeout1); timeout1 = null; } productGetParams.title = params.title; const fetch = () => { setSelectLoading1(true); props.dispatch({ type: `separate/list`, payload: params, callback: (res: any) => { setSelectLoading1(false); if (productGetParams.title == params.title) { if (res.error === 0) { if (res.data.length) { setProductOptions((old: any) => { if(params.page==1){ return unique([].concat(res.data), ‘id‘); }else { return unique(old.concat(res.data), ‘id‘); } }); if (((params.page-1) * 15+res.data.length) < res.total) { setHasMore1(true); } else { setHasMore1(false); } } } } }, }); }; timeout1 = setTimeout(() => { fetch(); }, 500); };